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

【问题标题】：check if (child) form is dirty in nested reactive forms检查嵌套反应式表单中的（子）表单是否脏
【发布时间】：2021-03-15 16:06:03
【问题描述】：

我有一个包含不同部分的表单（嵌套表单组）您如何检查特定部分中的某些内容是否发生了变化。

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'); }

...
}

例如，如果表单很脏，我想要一个类（样式），我可以这样做：

[class.dirty]="formGroup.dirty"

如何检查“one”表单是否脏？

【问题讨论】：

标签： html angular typescript angular-reactive-forms formbuilder

【解决方案1】：

Angular 会自动添加控件类，如果表单很脏，你可以根据需要使用该类来设置样式。

div.ng-dirty{
....
}

For More Information

【讨论】：

不错。我也有一些复杂的组件。我必须对 div 的父组件/div（包含表单）做一些事情。换句话说，该类必须设置在更高的几个级别上，我不会使用 jquery。
然后您可以使用 formGroup 脏属性来动态设置类，如另一个答案中所述。

【解决方案2】：

你可以通过调用来访问组脏

formGroup.get('one').dirty

这会将FormGroup 返回为AbstractControl，因此可以使用标准控制道具。

【讨论】：