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

Question

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

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循环后，我检查了表单，发现没有被禁用的内容。请问我错在哪里了吗？ :-)

非常感谢您的帮助!!! :-)

- Sivakumar Tadisetti

---

可能是因为你使用了 formNameArray 而不是 formArrayName。 - Joseph Webber

你是否正在尝试创建带有禁用功能的动态输入框？ - Chellappan வ

@ChellappanV 是的，我正在尝试创建一个带有禁用功能的动态输入框。 - Sivakumar Tadisetti

你为什么要循环计数器数组而不是表单名称数组？ - Chellappan வ

@ChellappanV 抱歉，我没听懂你的意思。 - Sivakumar Tadisetti

你能在 Stackblitz 分享你的代码吗？ - Chellappan வ

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

- monogate

Answer 2

如果您想启用动态输入，请启用。

form: FormGroup;
  orders = [
    { id: 100, name: 'order 1' },
    { id: 200, name: 'order 2' },
    { id: 300, name: 'order 3' },
    { id: 400, name: 'order 4' }
  ];

  constructor(private formBuilder: FormBuilder) {
    const controls = this.orders.map(c => new FormControl(''));

    this.form = this.formBuilder.group({
      orders: new FormArray(controls)
    });

    this.form.get('orders').controls
      .forEach(control => {
        control.disable();
      })
  }

并且HTML应该长成这个样子

<form [formGroup]="form" >
  <label formArrayName="orders" *ngFor="let order of form.controls.orders.controls; let i = index">
    <input type="text" [formControlName]="i">
    {{orders[i].name}}
  </label>
</form>

- Chellappan வ

Answer 3

在迭代中使用formArray控件，将其分配给每个输入。

<form [formGroup]="testForm">
    <div formArrayName="arrs">
        <div *ngFor="let num of countArr; let idx = index">
            <input type="text" [formControlName]="idx" [attr.disabled]="true">
        </div>
    </div>
</form>

您可以参考这篇文章：

https://angular.io/guide/reactive-forms#display-the-formarray

- Prachi

---

Prachi，感谢您的回答，但我想禁用每个表单控件，我该如何做？ - Sivakumar Tadisetti

我已经更新了禁用的代码。不要为简单的功能使用复杂的逻辑。 - Prachi

Answer 4

要禁用FormArray的FormControls，“reset”使其更容易。

this.formGroupHere.get(['formArrayHere']).reset({
        disableFields: {
            formControlHere: true,
            otherFormControl: true
        }
    }
);

- Yoel Duran

Answer 5

通过以下方式在初始化或更新时禁用formControl是可能的：

我假设，testForm 是 formGroupName，arrs 是 FormArrayName，inputValue 是 formControlName。

(<FormArray>this.testForm.get('arrs')).push(new FormGroup({
  'inputValue': new FormControl({ value: '', disabled: true }, Validators.required),
}));

请记住，禁用表单输入不会允许您提交。相反，您可以使用以下的readonly属性。

<input readonly="readonly" type="text" />

这将帮助您从表单中获取输入值。 只读的源代码

- Anand Raja