typescript - Kontrollera om inmatningskontroll har viss typ av validator i angular2

Jag har en komponent som omsluter inmatningsfältet. I komponenten tar jag emot Control-objektet från @Input() inputControl: Control;. I mallen har jag en span som visar ett meddelande om inmatningsfältet i komponenten inte är obligatoriskt.

<span
  class="input-label-caption">
  (optional)
</span>

och inmatningen

<input
    *ngIf="inputMode=='text' || inputMode=='email'"
    type="{{inputMode}}"
    [ngFormControl]="inputControl"
    placeholder="{{placeholder}}"
    class="input-text"
    [disabled]="inputDisabled"
    [ngClass]="{
    'inverted': inverted
    }">

Hur kan jag läsa från inputControl-objektet om det innehåller Validators.required? Jag vill veta om jag kan använda det så här till exempel

<span
  class="input-label-caption"
  *ngIf="!inputControl.validators.required"
  >
  (optional)
</span>

Svar #1

Du kan försöka använda detta uttryck:

<span
  class="input-label-caption"
  *ngIf="!inputControl.errors?.required"
>
  (optional)
</span>

Attributet errors innehåller en post per namn på validatorn som misslyckades.

Jag använder Elvis-operatorerna för errors-attributet eftersom det kan vara odefinierat om det inte finns något valideringsfel.

Redigera

Efter din kommentar tror jag att du kan kontrollera en "required"-validator med ===-operatorn direkt med Validators.required-funktionen. Faktum är att en validator helt enkelt är en funktion och Validators.required-funktionen används för "required"-validering.

Här är den motsvarande koden:

this.hasRequiredValidator = (this.inputControl.validator === Validators.required);

I det fall där validator-attributet är en array, behöver du utöka testet lite för att kontrollera om Validators.required-funktionen finns i arrayen.

Nu skulle koden i mallen vara:

(valfritt)

Hoppas det hjälper dig, Thierry

Svar #2

Jag kunde inte få ovanstående att fungera, vilket inte är förvånande med tanke på ändringarna i Angular sedan januari. Med den senaste versionen av Angular (2.2.0) behöver du något sådant här i din klass.

  get required(): boolean { 
    var _validator: any = this.inputControl.validator && this.inputControl.validator(this.inputControl);
    return _validator && _validator.required;
  }

Detta kommer också att hantera fallet där du har flera validerare i ett reaktivt formulär, t.ex.

      name: ['', [Validators.required, Validators.minLength(2)]]

Relaterade artiklar