The `setErrors` method does not set errors

When you set the errors of a FormControl (using the setErrors method) inside a FormGroup, where the FormControl contains validators then the errors are not set.

formGroup: FormGroup;

constructor(private formBuilder: FormBuilder) {
  this.formGroup = this.formBuilder.group({
    login: ["", [Validators.required]]
  });
}

ngOnInit() {
  const formLoginControl = this.formGroup.controls.login;
  formLoginControl.setErrors({ incorrect: true });
}

Here is a stackblitz of the issue.

This is happening because the validation has not run yet. Since setErrors is called before the validation has run, the errors get overwritten by the validator. Note that this issue occurs, when your FormControl is part of a FormGroup - it does not happen on stand-alone controls that are not part of a FormGroup.

To overcome this, setErrors needs to be called in a setTimeout.

Action items:

• Update the docs to make this issue clear
• Fix the underlying issue

[durveshparmar]

@all

I was also facing the same issue but I think it should be resolved as per following:

const formLoginControl = this.formGroup.controls.login;
formLoginControl.valueChanges.subscribe(value=> {
       //Condition based on value
       formLoginControl.setErrors({ incorrect: true });
})

It works for me properly with expected output whenever value is updated. You can add this code in ngOnInit() as per your need. I don’t recommend setTimeout Solution. Let me know if this one works for anyone. 👍

Thanks

[abhiabhisheik646]

for (const key of Object.keys(this.addAgent.controls)) { if (this.addAgent.controls[key].invalid) { this.addAgent.controls[‘email’].setErrors({‘incorrect’: true}); const invalidControl = this.el.nativeElement.querySelector(‘[formcontrolname="’ + key + ‘"]’); invalidControl.focus(); invalidControl.scrollIntoView({block: “end”, behavior: “smooth”}) break; }