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组件内迭代一些随机的 count 变量。您可以迭代添加的控件。

您可能会问：“到底哪个控件？还没有添加！”

好吧，这就是为什么要以编程方式在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

Answer 2

在迭代中使用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

Answer 3

如果要启用动态输入启用

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>

Answer 4

要禁用FormArray的FormControl，可以使用“重置”来简化操作。

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

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" />

这也将帮助您从表单中获取输入值。

readonly 的来源

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

5 个答案: