如何在 Angular 4 中禁用 FormArray 中的 FormControl

Question

我写了下面的代码片段，我认为这将禁用FormControl的FormArray。

some.component.html

<form [formGroup]="testForm">
    <div *ngFor="let num of countArr">
        <input type="text" formNameArray="arrs">
    </div>
</form>

some.component.ts

countArr = [1, 2, 3, 4, 5];
count = 5;
arrs;
testForm: FormGroup;

this.testForm = this.formBuilder.group(
    arrs: this.formBuilder.array([])
);

this.arrs = this.testForm.get('arrs');

for (let i = 0; i < this.count; i++) {
    this.arrs.insert(i, new FormControl({value: '', disabled: true}));
}

但是for执行完成后，我检查了表单，发现没有任何内容被禁用。你能告诉我我哪里做错了吗？？？:-)

感谢您的帮助！！！:-)

Answer 1

首先，你的 html 组件应该是这样的：

<form [formGroup]="testForm">
    <div formArrayName="arrs">
        <div class="form-group" *ngFor="let arrItem of testForm.get('arrs').controls; let i = index">
            <input type="text" class="form-control" [formControlName]="i">
        </div>
    </div>
</form>

您不需要在 html 组件中迭代一些随机计数变量。您可以迭代添加的控件。

您可能会问“究竟是哪些控件？它们还没有添加！”

嗯，这就是为什么您以编程方式将这些控件添加到ngOnInit：

ngOnInit() {
    this.testForm = new FormGroup({
      arrs: new FormArray([])
    }
    );

    for (let i = 0; i < this.count; i++) {
      const control = new FormControl(null, Validators.required);
      (<FormArray>this.testForm.get('arrs')).push(control);
    }

    this.disableInputs();
}

这是启动FormArray然后在for循环内创建初始控件并将新创建的控件推送到数组的正确语法。

注意：有一个disableInputs()函数调用。这也是您以编程方式禁用输入的地方：

  disableInputs() {
    (<FormArray>this.testForm.get('arrs'))
      .controls
      .forEach(control => {
        control.disable();
      })
  }

一个工作示例：stackblitz