如何根据以前的表单值在响应式表单中启用表单字段?

Question

我有一个角形数组，它是这样的

addNewFormRow():FormGroup{
return this.FormBuilder.group({
operator:new FormControl('none'),
operatorValue:new FormControl({value : 'none', disabled : true }, Validators.required)
});
}

我有一个表单组数组，其中可以有多于一行。

默认情况下，新添加的行将'operatorValue'字段禁用，当'operator'字段值更改为'none'以外的任何值时(通过调用更改operator字段的函数)，我将启用它。

问题场景:在加载屏幕时，我从对象中获得一组数据，并将该值修补到表单中。因此，至少有五行存在值，但'operatorValue'被禁用。

what I have try:

1. 手动通过单个'operator'表单控件，
2. 如果它的值不是none，则启用'operatorValue'的值

这个方法在理论上工作得很好，但是在用例中，我可能有不同的表单控件需要相同类型的验证。这绝对不是一个建议的方法，我觉得我应该在初始化表单时添加某种验证。我如何用最少和干净的代码实现这一点?

Answer 1

有很多方法可以做到这一点，但就最小化，干净的代码而言:

自定义指令 你可以编写一个自定义指令，并将其添加到operatorValue FormControl的HTML中。理论上，这个指令可以注入NgControl，并通过NgControl的父属性查找操作符FormControl，然后监听那里的valueChanges。这是一段额外的代码，但很容易维护和干净。

NgNeat反应式表单 这里有一个很棒的库，扩展了Angular的响应式表单控件。使用这个，在创建空表单组的方法中，你可以使用' disabledWhile ' Observable来监听FormControl操作符，并以编程方式相应地禁用/启用。这会给你的项目增加一个依赖项，但只给你的组件增加几行代码。

如果您只关心初始加载，您还可以更新您的addNewFormRow方法，使其带有表单数据的可选参数。然后，当创建FormGroup时，只需使用:disabled: !data。操作符(而不是硬编码的true)