角度 6 FormGroup/FormControl 迭代器问题答案

【问题标题】：angular 6 FormGroup/FormControl iterator issue角度 6 FormGroup/FormControl 迭代器问题
【发布时间】：2018-07-02 03:04:46
【问题描述】：

我有一个 fromGroup 和 7 个 FormControl 内部（姓名、地址、邮政编码等）当页面初始化时，只有第一个 FormControl 被启用，其他的被禁用。只有在用户输入他的名字后，其他的 FormControls 才应该被启用。我想遍历所有表单控件并在循环中启用每个控件，而无需键入所有表单控件。我想做这样的事情：

for (const field in this.form.controls) { 
   this.form.get(field).enable();
}

或类似：

Object.keys( this.form.controls).forEach(key => {
   this.form.controls[key].enable();
});

但不幸的是，其他表单控件从未启用

知道为什么吗？

谢谢呸呸呸

【问题讨论】：

您是否在初始化期间禁用了它们？它在工作吗？你如何调用一种方法来启用它们？提供更多详细信息以帮助您更好地提供服务。
是的，其他表单控件在初始化期间被禁用，这部分工作。编辑名称formcontrol时，有一个订阅者监听名称formcontrol：code this.insuredAddressForm.get('name').valueChanges .subscribe(inserted => { if(inserted.length > 0){ //在这里我想启用所有的表单控件 } } code
我没有看到您的代码有任何问题。你能在stackblitz.com中重现这个问题吗？
我看到的唯一问题是，您订阅了insuredAddressForm 表单控件，并且您正在尝试修改form 命名表单控件this.form.controls[key].enable();
你本可以更好地解释你的错误。否则它将导致像这样不必要的解决方法。无论如何，我已经做了一个答案，为您在下面的 cmets 中提到的另一个答案中提到的错误提供解决方案。

标签： angular angular6 angular-reactive-forms angular-forms

【解决方案1】：

您应该排除修改name 表单控件内部的值更改subscription。因为这将进行递归调用并给出

超过最大调用堆栈大小

错误。而且你不应该再次启用name控制，因为它已经是enabled。

this.form.get('name').valueChanges.subscribe(inserted => {
      if (inserted.length > 0) { 
        Object.keys(this.form.controls)
        .forEach(key => {
          if(key !== 'name')
          this.form.controls[key].enable()
        });
      }
 });

【讨论】：

该死的人，你是对的 :) 这实际上是我的问题。最后一个问题为什么我们要放 Object.keys ？我知道我们需要使用 formControlName 作为 key 遍历每个 formControl ，但为什么是 Object ？谢谢阿米特
Object.keys 将为您提供任何对象的密钥。在您的情况下，每个表单控件的names（this.form.controls 的键）。这里this.form.controls 是一个对象。
完成 :) 最好的问候阿米特

【解决方案2】：

此示例适用于我：stackblitz

您应该为我们发布更多代码详细信息以便遇到您的问题。

【讨论】：

它实际上与： Object.keys(this.form.controls) .forEach(key => { this.form.controls[key].enable() });但是当我使用： this.insuredAddressForm.get('name').valueChanges .subscribe(inserted =>..... 就像在第一个输入中键入的每个字符都是订阅者一样，我得到：错误 RangeError: 最大调用堆栈超出尺寸
我正在使用订阅者，因为我想将逻辑保留在 component.ts 文件中，而不是像在您的示例中那样将方法调用放在输入本身中