检查嵌套反应式 forms 中的（子）表单是否脏

Question

I have a form with different sections (nested formgroups) How can you check if something changes in a specific section.

HTML:

<div [formGroup]="formGroup">
  <div formGroupName="one">
    <input type="text" formControlName="email">
    <input type="text" formControlName="name">
   <div>
</div>

TS:

 export class someClass implements OnInit {
  
  formGroup = this.formBuilder.group({
    one: this.formBuilder.group({
      email: [null, [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')]],
      name[null],
      })
  });

 get emailControl(): AbstractControl { return this.formGroup.get('one.email'); }
 get nameControl(): AbstractControl { return this.formGroup.get('one.name'); }

...
}

for example if I want a class (style) if the form is dirty, I can do something like:

[class.dirty]="formGroup.dirty"

How can I check if the "one" form is dirty?

Answer 1

Angular will automatically adds control class, If form is dirty, you can use that class to style as per your need.

div.ng-dirty{
....
}

For More Information

Answer 2

You can access the group dirtiness by calling

formGroup.get('one').dirty

That returns the FormGroup as AbstractControl , thus with standard control props accessible.