Question

对于我的生活，似乎我应该能够创建一个禁用的FormArray。我试图用1-n子数组（也就是FormArray）构建一个只查看父表单（FormArray）。我将子数组传递给子组件以初始化它们的控件（FormControl）。

我尝试使用不同的选项在父窗体上调用disable()，并且在生命周期的不同挂钩中，它会抛出此异常：

检查后表情发生了变化。以前的价值：＆＃39; true＆＃39;。当前价值：＆＃39; false＆＃39;。

以下是我尝试过的一些例子：

在ngOnInit中，同时创建和停用表单 - ＆gt;不禁用，抛出异常
以ngOnInit创建表单，ngAfterViewInit禁用表单 - ＆gt; DOES禁用但抛出异常

旧版本的表单接受了一个选项对象，（遗憾的是）这不再有效但看起来像是：new FormArray({ value: myControlsArray, disabled: true })。

我创建了一个plnkr来模拟组件层次和形式。

有谁知道如何初始化已停用的表单？

编辑（回答）：我忽略了一个重要的信息和解决方案的线索。在我的用例中，我获取一个保存的表单值并初始化一个新的只读表单。我不应该将保存的表单值传递给子组件，而应该创建父表单及其子表单和控件。

Answer 1

您无法创建已禁用的form。但是你可以创建一个input（fieldset）的禁用集，如果你的小组与表单一样大，那么结果是相同的。

<fieldset [disabled]=[true]>
  <input type="text" ...>
  <input ...>
</fieldset>

请参阅There is some way to disabled set of inputs in angular 2?

Answer 2

如编辑中所述，我使用保存的表单值初始化新的只读表单。我没有将值传递给子组件来初始化它的控件，而是在很大程度上通过在父表单和子表单的同时构造控件来解决这个问题。这样做我可以在ngOnInit中禁用父表单而不会使更改检测失效并仍然将子表单传递给子组件。这里是它的外观摘录和working example：

app.component.ts：

public questions: Array<string[]> = MULTIPLE_RADIOS;

public responses: Array<string[]> = MULTIPLE_RESPONSES;

constructor(private _fb: FormBuilder) {}

ngOnInit() {
    this.form = this._fb.array([]);
    for (let response of this.responses) {
      const questionForm = this._fb.array([]);
      for (let responseControl of response) {
        questionForm.push(this._fb.control(responseControl));
      }
      this.form.push(questionForm);
    }
    this.form.disable({ emitEvent: false });
  }

APP-radio.component.ts：

@Input()
public form: FormArray;

@Input()
public radios: string[];

constructor(private _fb: FormBuilder) {}

ngOnChanges() {
  // same component used to create a live form
  // in this case, its parent (app-question.component) gives
  // it an empty form, and the child adds the control it needs
  if (this.form.length === 0) {
    this.form.push(this._fb.control(''));
  }
}

如何创建具有子组件的禁用表单？

2 个答案: