Comment puis-je configurer manuellement une forme Angulaire champ comme invalide?

en composant:

formData.form.controls['email'].setErrors({'incorrect': true});

et en html:

<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email"  #email="ngModel">
<div *ngIf="!email.valid">{{email.errors| json}}</div>

J'ai essayé d'appeler setErrors() à l'intérieur d'un ngModelChange gestionnaire dans un modèle de formulaire. Cela n'a pas fonctionné jusqu'à ce que j'attendais une tique avec setTimeout():

modèle:

<input type="password" [(ngModel)]="user.password" class="form-control" 
 id="password" name="password" required (ngModelChange)="checkPasswords()">

<input type="password" [(ngModel)]="pwConfirm" class="form-control"
 id="pwConfirm" name="pwConfirm" required (ngModelChange)="checkPasswords()"
 #pwConfirmModel="ngModel">

<div [hidden]="pwConfirmModel.valid || pwConfirmModel.pristine" class="alert-danger">
   Passwords do not match
</div>

composant:

@ViewChild('pwConfirmModel') pwConfirmModel: NgModel;

checkPasswords() {
  if (this.pwConfirm.length >= this.user.password.length &&
      this.pwConfirm !== this.user.password) {
    console.log('passwords do not match');
    //setErrors() must be called after change detection runs
    setTimeout(() => this.pwConfirmModel.control.setErrors({'nomatch': true}) );
  } else {
    //to clear the error, we don't have to wait
    this.pwConfirmModel.control.setErrors(null);
  }
}

Pièges de ce genre sont de me faire préférer formes réactives.

Voici un exemple qui fonctionne:

MatchPassword(AC: FormControl) {
  let dataForm = AC.parent;
  if(!dataForm) return null;

  var newPasswordRepeat = dataForm.get('newPasswordRepeat');
  let password = dataForm.get('newPassword').value;
  let confirmPassword = newPasswordRepeat.value;

  if(password != confirmPassword) {
    /* for newPasswordRepeat from current field "newPassword" */
    dataForm.controls["newPasswordRepeat"].setErrors( {MatchPassword: true} );
    if( newPasswordRepeat == AC ) {
      /* for current field "newPasswordRepeat" */
      return {newPasswordRepeat: {MatchPassword: true} };
    }
  } else {
    dataForm.controls["newPasswordRepeat"].setErrors( null );
  }
  return null;
}

createForm() {
  this.dataForm = this.fb.group({
    password: [ "", Validators.required ],
    newPassword: [ "", [ Validators.required, Validators.minLength(6), this.MatchPassword] ],
    newPasswordRepeat: [ "", [Validators.required, this.MatchPassword] ]
  });
}

Dans ma forme Réactive, j'avais besoin de marquer un champ comme non valide si un autre champ a été vérifiée. En ng version 7 je n'ai suivantes:

    const checkboxField = this.form.get('<name of field>');
    const dropDownField = this.form.get('<name of field>');

    this.checkboxField$ = checkboxField.valueChanges
        .subscribe((checked: boolean) => {
            if(checked) {
                dropDownField.setValidators(Validators.required);
                dropDownField.setErrors({ required: true });
                dropDownField.markAsDirty();
            } else {
                dropDownField.clearValidators();
                dropDownField.markAsPristine();
            }
        });

Donc au-dessus, quand j'ai cocher la case il définit la liste déroulante, comme l'exige et le marque comme sale. Si vous ne marquez pas en tant que tel, alors il ne sera pas valide (dans l'erreur) jusqu'à ce que vous essayez d'envoyer le formulaire ou d'interagir avec lui.

Si la case est définie sur false (désactivé), puis nous avons clairement la nécessaire du programme de validation sur la liste déroulante et de le remettre à un état primitif.

Aussi - n'oubliez pas de vous désinscrire de la surveillance des modifications de champ!