有效性更改后更新 FormArray 属性的有效性答案

【问题标题】：Updating validity on FormArray property after validity change有效性更改后更新 FormArray 属性的有效性
【发布时间】：2017-08-08 17:29:56
【问题描述】：

我正在使用 Angular 4 在作为数组的 FormArray 项目上以反应形式创建自定义验证器。它适用于初始加载，但是如果我将一个项目添加到数组然后删除该项目，Validator.required 验证将不会设置。

FromArray -> 表单组

let customItemsValidator: Array<any> = item.selectType === 'custom' && item.required ? 
                                       [Validators.required] : [];

return this.formBuilder.group({
   customItems: [[], customItemsValidator],
})

主组件上的主窗体.ts

this.appForm = this.formBuilder.group({
   option: this.formBuilder.array([]),
   items: this.formBuilder.array([])
});

所以我可以构建表单并且它可以 100% 工作，我有一个提交按钮，如果表单无效并且在初始加载时该按钮将保持禁用状态，直到我将项目添加到 customItems 属性。一旦我删除了添加的项目，提交按钮仍然启用，即使现在它应该被禁用，因为它是必需的并且没有价值。

移除方法

selectOptionsCustomRemove(customItem, customIdx: number, idx: number) {
  pullAt(this.items.at(idx).get('customItems').value, customIdx);
}

因此它会删除该项目，但表单上的有效性不会改变。

我在pullAt 之后尝试了updateValueAndValidity()，但这似乎不起作用。

【问题讨论】：

标签： angular angular-reactive-forms angular-validation angular4-forms

【解决方案1】：

结果当我从数组中删除项目时，它只留下了一个空的[]，因为pullAt 刚刚从索引中删除，这使得属性的值为[]。所以我必须将数组分配给null，以便触发验证。

if (this.options.at(idx).get('customItems').value.length === 0) { 
        this.options.at(idx).patchValue({ customItems: null }) 
}

【讨论】：