Question

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

FromArray - ＆gt; FormGroup

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

因此它删除了该项目，但有效性在表单上没有变化。

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

Answer 1

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

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

有效期更改后，更新FormArray属性的有效性

1 个答案: