CODEWITHSUNDEEP
formsangularvalidation
Sam
Sam

Reputation: 632

How to force Angular 2 to re-check validator?

I have a simple login form written in Angular 2 reactive (data-driven) template. It's working perfectly but when I refresh the page and browser fills e-mail+password (autocomplete), my form's valid property seems false.

But when I press any key or click anywhere in my page while form is invalid, angular updates some states (I guess) and my form become valid.

How can I trigger that state? How can I say angular "Hey, check my form again."? I can't trigger my own validation script because some validation messages are alerts. If I do this, when user open this page, he/she will see these alerts.

I remember, I use trigger('input') trick to update ng-model.

Upvotes: 8

Views: 23579

Answers (3)

oware
oware

Reputation: 706

If you have nested forms using arrayForm, you must update your control, then the parent form (te array item) and then the main form and it will work, example:

control?.updateValueAndValidity();
parentForm.updateValueAndValidity();
this.mainForm.updateValueAndValidity();

Upvotes: 0

Mingzhen Zhuang
Mingzhen Zhuang

Reputation: 176

updateValueAndValidity() is what you are looking for. The document is here: AbstractControl. It can force recalculate the value and validation status of the control.

Here's a demo:

form.component.ts

export class FormComponent implements OnInit {
  myform: FormGroup;

  // explicit validation of each field
  emailValid: AbstractControl;
  passwordValid: AbstractControl;

  constructor(private fb: FormBuilder) {
    this.myform = fb.group({
      'email': ['', Validators.required],
      'password': ['', Validators.required],
    });

    this.emailValid = this.myform.controls['email'];
    this.passwordValid = this.myform.controls['password'];
  }

    ngOnInit() {
        this.myform.get('email').valueChanges.subscribe(()=>forceValidAgain());
        this.myform.get('password').valueChanges.subscribe(()=>forceValidAgain());
    }

  forceValidAgain(){
    this.emailValid.updateValueAndValidity();
    this.passwordValid.updateValueAndValidity();
  }
}

form.component.html

<form [formGroup]="myform" (ngSubmit)="onSubmit(myform.value)">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email"
           class="form-control"
           id="email"
           name="email"
           [formControl]="myform.controls['email']"
           [ngClass]="{'is-invalid': !emailValid.valid && emailValid.touched }">
    <div
      class="invalid-feedback"
      *ngIf="emailValid.hasError('required')">
      This field is required
    </div>
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input type="password"
           class="form-control"
           id="password"
           name="password"
           [formControl]="myform.controls['password']"
           [ngClass]="{'is-invalid': !passwordValid.valid && passwordValid.touched}">
    <div
      class="invalid-feedback"
      *ngIf="passwordValid.hasError('required')">
      This field is required
    </div>
  </div>
</form>

Upvotes: 16

Marcin
Marcin

Reputation: 1426

I would suggest creating a method like onValueChanged (that is mentioned in Angular2 docs), bind it to your form, and execute it while the component is initialized. So the binding to the form changes should be done in this way:

this.form.valueChanges.subscribe((data) => { 
  this.onValueChanged(data)
});

And execution for example just the line after like this:

this.onValueChanged();

This execution should solve your problem via validation during component initialization.

I think that the method implementation from the docs (below) is pretty clear.

onValueChanged(data?: any) {
  if (!this.heroForm) { return; }

  const form = this.heroForm;
  for (const field in this.formErrors) {
    // clear previous error message (if any)
    this.formErrors[field] = '';
    const control = form.get(field);

    if (control && control.dirty && !control.valid) {
      const messages = this.validationMessages[field];
      for (const key in control.errors) {
        this.formErrors[field] += messages[key] + ' ';
      }
    }
  }
}

Docs I am referring to: https://angular.io/docs/ts/latest/cookbook/form-validation.html

Upvotes: 0

Related Questions