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

Question

对于我来说，似乎我应该能够创建一个禁用的 FormArray。我正在尝试使用 1-n 子数组（也称为 FormArray）构建一个仅供查看的父表单 (FormArray)。我将子数组向下传递给子组件以初始化它们的控件 (FormControl)。

我试过在父表单上用不同的选项和生命周期的不同挂钩调用 disable()，它抛出这个异常：

Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

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

在 ngOnInit 中，同时创建和禁用表单 -> 不禁用，抛出异常
在 ngOnInit 中创建表单，在 ngAfterViewInit 中禁用表单 -> 禁用但抛出异常

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

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

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

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

Answer 1

您无法创建残疾人 form。但是你可以创建一个input（fieldset）的禁用集，如果你的组和表格一样大，结果是一样的。

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

见

Answer 2

如编辑中所述，我正在使用保存的表单值来初始化新的 read-only 表单。我没有将值传递给子组件来初始化它的控件，而是通过在父窗体和 sub-forms 的同时构造控件来解决这个问题。这样做我可以禁用 ngOnInit 中的父表单而不触发更改检测，并且仍然将 sub-forms 传递给子组件。这是它的外观和 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(''));
  }
}

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

How do I create a disabled form having child components?

angular2-forms

angular2-changedetection

angular