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

【问题标题】：How do I create a disabled form having child components?如何创建具有子组件的禁用表单？
【发布时间】：2017-02-12 04:05:11
【问题描述】：

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

我尝试使用不同的选项和生命周期的不同钩子在父窗体上调用disable()，它会抛出这个异常：

表达式在检查后发生了变化。以前的值：“真”。当前值：'false'。

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

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

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

我创建了一个plnkr 来对组件层次结构和表单进行建模。

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

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

【问题讨论】：

你不能创建禁用的表单，你应该先创建它然后禁用。
@RomanC 我希望我的问题清楚地表明这是我正在使用的当前方法。请注意它导致的更改检测异常。理想情况下，有一种方法可以将表单初始化为禁用状态，但实际上我需要帮助确定在何处/如何调用 disable() 方法，这样它就不会触发更改检测。

标签： angular angular2-forms angular2-changedetection

【解决方案1】：

您无法创建已禁用的form。但是您可以创建一个禁用集 input (fieldset)，如果您的组与表单一样大，则结果是相同的。

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

见There is some way to disabled set of inputs in angular 2?

【讨论】：

虽然很聪明并且很好地提醒了 HTML 基础知识，但这并没有解决我的问题。 Angular 2 没有将<fieldset> 上的disabled 属性绑定到我的表单，因此在功能禁用时，它们没有为禁用状态应用视觉样式。

【解决方案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(''));
  }
}

【讨论】：