angular - 获取所有已从启用更改为禁用的 Angular 表单控件，反之亦然？

Question

长话短说； FormGroup不考虑dirty当嵌套 FormControl从禁用更改为启用，反之亦然。

细节；获取属于 FormGroup 的所有表单控件的好方法是什么？ ，已从启用更改为禁用，反之亦然？

作为this Stackblitz显示，pristine , dirty , touched , 和 untouched当控件从 enabled 更改时，属性保持不变至 disabled ， 或相反亦然。

export class AppComponent implements OnInit {
  person: FormGroup;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.person = this.fb.group({
      name: this.fb.control(''),
      age: this.fb.control(100),
    });
  }
}

上面的 Typescript 定义了一个 FormGroup (人) 和两个 FormControls (姓名 和年龄)。

下面的 HTML 允许通过单击按钮启用和禁用 name 控件。一些属性也被输出。

<form [formGroup]="person">
    <input type="text" placeholder="Name" formControlName="name">
    <button (click)="person.controls['name'].disable()">Disable</button>
    <button (click)="person.controls['name'].enable()">Enable</button>
    <br />
    <br />
    <input type="text" placeholder="Age" formControlName="age">
</form>

<pre>{{person.value | json}}</pre>

disabled: {{ person.disabled }}<br />
pristine: {{ person.pristine }}<br />
dirty: {{ person.dirty }}<br />
touched: {{ person.touched }}<br />
untouched: {{ person.untouched }}<br />

我希望它很容易检测到控件何时:

• 启用(以前禁用的地方)
• 禁用(以前启用的地方)

不同于 pristine , dirty , touched , 和 untouched属性，启用和禁用状态似乎是短暂的。

似乎没有 FormGroup 的属性来反射(reflect)子控件是否已启用或禁用了其原始状态？ FormGroup 保持原始状态且未受到影响。

建议使用statusChanges .但是，这仅提供四种可能的验证状态值(VALID、INVALID、PENDING、DISABLED)。没有明确的方法可以将状态映射到控件并随后确定是否已从启用更改为禁用，反之亦然。我创建了 another Stackblitz证明这一点。

编辑

我打开了一个 bug FormGroup not dirty when a nested FormControl changes from disabled to enabled, or vice versa .

Answer 1

您可以尝试监听控件状态变化 - 其中之一是 disabled

https://angular.io/api/forms/AbstractControl#status

https://angular.io/api/forms/AbstractControl#statusChanges

编辑:

有一个明显的方法，但它被称为 registerOnDisabledChange

https://angular.io/api/forms/FormControl#registerOnDisabledChange

展示从您的 stackblitz fork 出来的 https://stackblitz.com/edit/formbuilder-soydhk

如果您需要在控制级别上监听它，没有什么可以阻止您编写聚合监听器。