在 FormArray 子上调用 disable() 会重置脏状态答案

【问题标题】：Calling disable() on FormArray child resets dirty state在 FormArray 子上调用 disable() 会重置脏状态
【发布时间】：2020-11-24 06:48:15
【问题描述】：

在 Angular 中，我有如下形式

  const form = this.fb.group({
      id: 1,
      unique_identifier: "a-b-c-d-e",
      name: "foo",
      last_update: "2020-07-31 12:22:22",
      items: this.fb.array([
        this.fb.group({
          name: "Item 1",
          value: "1",
        }),
      ]),
    });

当我调用 form.get('items').markAsDirty() 时，FormArray 的脏属性为真，正如预期的那样。

form.get('items').markAsDirty();

console.log(form.get('items').dirty) // = true

之后，当我在 FormArray 的其中一个孩子上调用 disable() 或 enable() 时，FormArray 的脏属性为 false。没想到

form.get('items').markAsDirty();

console.log(form.get('items').dirty) // = true

form.get('items').at(0).get('value').disable();

console.log(form.get('items').dirty) // = false

有谁知道这是为什么？或者这是 Angular 中的错误？

另见 Stackblitz：https://stackblitz.com/edit/angular-ivy-koyisp?file=src%2Fapp%2Fapp.component.ts

【问题讨论】：

(<FormArray>this.form.get('items')).at(0).get('value').disable({onlySelf: true}); 这应该为您完成这项工作
谢谢！这样可行。这是 Angular 中的预期行为吗？
这里我们只需要禁用特定字段而不是整个表单，为此我们使用了{onlySelf: true} 我将其移至您可以接受的答案。

标签： angular

【解决方案1】：

您需要通过在 .disable() 中传递 {onlySelf: true} 来禁用 FormArray 的特定字段，请参见下面的示例。

(<FormArray>this.form.get('items')).at(0).get('value').disable({onlySelf: true});

console.log(form.get('items').dirty) // = true (should be true now)

【讨论】：