3

我编写了下面的代码片段，我认为它会禁用FormControl.FormArray

some.component.html

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

一些.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执行完成后，我检查了表单，发现没有任何内容被禁用。你能告诉我我哪里做错了吗？？？:-)

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

4

5 回答 5

6

首先，这是您的 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

于 2018-07-03T13:51:15.830 回答
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>
于 2018-07-03T13:59:46.727 回答
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

于 2018-07-03T13:41:49.683 回答
1

要禁用 FormArray 的 FormControls，“重置”很容易。

this.formGroupHere.get(['formArrayHere']).reset({
        disableFields: {
            formControlHere: true,
            otherFormControl: true
        }
    }
);
于 2020-04-23T19:48:09.847 回答
1

可以通过在初始化或更新时禁用 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" />

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

只读源

于 2021-07-26T15:49:37.237 回答