Angular reactive forms: how show validation errors in a dialog?

Question

I have a Angular reactive forms and i want show validation errors in a material dialog.

There is a way for subscribe formControl.errors and on error do something?

EG.:

this.formControl.errors.subscribe(errors => {
    this.dialog.open(DialogAlertComponent, {data: errors});
});

Take a look here https://stackoverflow.com/questions/49665960/angular-5-template-forms-detect-change-of-form-validity-status — Stefan, Nov 15 '19 at 09:04

score 2 · Accepted Answer · answered Nov 15 '19 at 10:08

To show errors when there is a statusChange or valueChange in your form, you can make use of the below 2 observables on your formGroup object.

valueChanges: Observable --> emits an event every time the value of the control changes
statusChanges: Observable ---> emits an event every time the validation status of the control recalculates.

form: FormGroup;
constructor(private formBuilder: FormBuilder) {}

this.form = this.formBuilder.group({
  username: ['', [ Validators.required ]],
  password: ['', [ Validators.required ]]
});

To monitor a single formcontrol,

this.form.get('username').valueChanges.subscribe(
  result => {
    // call your DialogAlertComponent to show errors if any
  }
);

To monitor the entire form,

this.form.valueChanges.subscribe(
  result => {
    // call your DialogAlertComponent to show errors if any
  }
);

Here statusChanges Observable can also be used.

Angular reactive forms: how show validation errors in a dialog?

1 Answers1