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 stackoverflow.com/questions/49665960/…

Stefan
– Stefan

2019-11-15 09:04:55 +00:00
Commented Nov 15, 2019 at 9:04 — Stefan
– Stefan, Commented Nov 15, 2019 at 9:04
@Stefan thanks this is the answer.

ar099968
– ar099968

2019-11-15 09:13:57 +00:00
Commented Nov 15, 2019 at 9:13 — ar099968
– ar099968, Commented Nov 15, 2019 at 9:13

Meyyappan Subramaniyan · Accepted Answer · 2019-11-15 10:08:38Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related