Directive validateur conditionnel requis en Angular 2

Question

J'ai besoin de rendre certains champs de formulaire obligatoires ou non en fonction de la valeur d'autres champs. Le système intégré RequiredValidator ne semble pas prendre en charge cette directive, j'ai donc créé ma propre directive :

@Directive({
  selector: '[myRequired][ngControl]',
  providers: [new Provider(NG_VALIDATORS, { useExisting: forwardRef(() => MyRequiredValidator), multi: true })]
})
class MyRequiredValidator {
  @Input('myRequired') required: boolean;

  validate(control: AbstractControl): { [key: string]: any } {
    return this.required && !control.value
      ? { myRequired: true }
      : null;
  }
}

Exemple d'utilisation :

<form>
  <p><label><input type="checkbox" [(ngModel)]="isNameRequired"> Is Name Required?</label></p>
  <p><label>Name: <input type="text" [myRequired]="isNameRequired" #nameControl="ngForm" ngControl="name" [(ngModel)]="name"></label></p>
  <p *ngIf="nameControl.control?.hasError('myRequired')">This field is required.</p>
</form>

Cela fonctionne bien si l'utilisateur fait d'abord basculer la case à cocher, puis tape ou efface du texte dans la zone de texte. Toutefois, si l'utilisateur fait basculer la case à cocher alors que la zone de texte est vide, le message de validation n'est pas mis à jour de manière appropriée.

Comment puis-je modifier MyRequiredValidator pour déclencher la validation lorsque son required la propriété est modifiée ?

Remarque : je cherche une solution qui n'implique que des modifications de l'adresse de l'entreprise. MyRequiredValidator . Je veux éviter d'ajouter toute logique au composant App.

Plunker : https://plnkr.co/edit/ExBdzh6nVHrcm51rQ5Fi?p=preview

Answer 1

J'utiliserais quelque chose comme ça :

@Directive({
  selector: '[myRequired][ngControl]',
  providers: [new Provider(NG_VALIDATORS, { useExisting: forwardRef(() => MyRequiredValidator), multi: true })]
})
class MyRequiredValidator {
  @Input('myRequired') required: boolean;

  ngOnChanges() {
    // Called when required is updated
    if (this.control) {
      this.control.updateValueAndValidity();
    }
  }

  validate(control: AbstractControl): { [key: string]: any } {
    this.control = control;
    return this.required && !control.value
      ? { myRequired: true }
      : null;
  }
}

Voir ce plunkr : https://plnkr.co/edit/14jDdUj1rdzAaLEBaB9G?p=preview .