patchvalue or setvalue of formbuilder does not mark field as dirty or touched

Question

I have a multi-step form where the user traverses back and forth to the form. I save the form data in service and when he comes back I use patchValue to patch all the data to form. I tried setValue also, but the form fields are not marked as either dirty or touched. How do I mark fields updated as dirty and touched?

this.formBuilder.patchValue(formData);

Pankaj Parkar · Answer 1 · 2020-03-17T15:36:23.233

23

You could explicitly mark the form using markAsDirty() & markAsTouched() method over your form object. See API Here

this.formName.markAsDirty()
this.formName.markAsTouched()

Update

Angular 8 onwards you can use markAllAsTouched to mark all form field as touched

this.formName.markAllAsTouched()

edited Mar 17 '20 at 15:36

answered Dec 19 '17 at 19:06

Pankaj Parkar

134,766
23
234
299

But this wont mark the field whose value got changed to dirty right? – Hacker Dec 20 '17 at 02:51
I demonstrated form level dirty thing. You can do it on field level as well – Pankaj Parkar Dec 20 '17 at 04:23
4

I also came across this problem and despite being possible to use the methods that you referenced it seems like we shouldn't have to do it manually. My point is that would be good to have angular verifying if the new value is different from the old one and set the according flags automatically. – António Quadrado Aug 20 '18 at 10:57
3

@AntónioQuadrado Only user interaction sets the dirty flag. This is intentional. See this discussion: https://github.com/angular/angular/issues/9768 – Markus Pscheidt Dec 17 '18 at 09:19

score 7 · Answer 2 · answered Nov 06 '18 at 13:51

the only solution i found for this issue it's.

 this.form = this.formBuilder.group({
      id:[null],
      name: ValidatorsUtil.name(),
      lastName: ValidatorsUtil.required(),
      email: ValidatorsUtil.email(),
      phone: ValidatorsUtil.required(),      
    });

this.form.setValue(this.client, {emitEvent: true});

Object.keys(this.form.controls).forEach( controlKey => {
       this.form.controls[controlKey].markAsDirty();
     });

patchvalue or setvalue of formbuilder does not mark field as dirty or touched

2 Answers2