Question

我正在使用新的表单API（2.0.2）构建一个角度2（2.0.0-rc.4）应用程序，当我尝试使用updateValue更新复选框表单控件时，我遇到了问题（）。

这就是我所做的：

我使用新的表单API构建了一个动态表单（基于cookbook中的部分：https://angular.io/docs/ts/latest/cookbook/dynamic-form.html）。我已经扩展了表单类来处理复选框：

export class FormControlCheckbox extends FormBase <string> {
  controlType: string;
  options: { key: string, value: string, checked: boolean } [] = [];
  checked: boolean = false;

  constructor(options: {} = {}) {
    super( options );

    this.controlType = "checkbox";
    this.options = options['options'] || [];
    this.checked = this.options[0].checked;
  }
}

这就是它创建时的样子：

new FormControlCheckbox({
    type: "checkbox",
    label: 'A label',
    name: "a-name",
    value: "",
    description: "a description",
    options: [
      {
        label: 'A label',
        name: "a-name",
        checked: false
      }
    ],
  })

当加载应用程序时，表单控件被创建并组合在一起，一切正常，表单按预期提交。我只需要做一个解决方法，在更改时更新复选框，标记如下：

<input [formControlName]="control.key" [(ngModel)]="control.checked" [id]="control.key" [type]="control.controlType" [attr.checked]="control.checked ? true : null" [value] = "control.checked" (change)="control.checked = $event.target.checked">

我也试过这个标记（它也可以正常工作）：

<input [formControlName]="control.key" [(ngModel)]="control.checked" [id]="control.key" [type]="control.controlType" [attr.checked]="control.checked ? true : null" [value] = "control.checked" (change)="control.checked = check.checked" #check>

这是我的问题出现的地方

我正在添加一个功能，可以在加载表单时更新控件值（用户应该能够重新访问页面并更新以前的值）。下面的代码更新了所有控制值。

for (var key in new_values) {
  //the form control keys are the same as the key in the list of new_values
  this.form.controls[key].updateValue(new_values[key]); //works for text, select and option
  this.form.controls[key].updateValueAndValidity(); //not sure if needed?
  this.form.controls[key].markAsDirty();
}

文本，选项和选择输入会更新，但复选框保持不变。没有错误或警告。我经常搜索类似的问题，但没有找到类似的问题或解决方案。

我错过了一些明显的东西吗？或者有人有同样的问题，想分享他们的解决方案？

谢谢！

Answer 1

通过在创建控制组之前更改值来解决问题（在此之前它可以更改值（例如x.value）。它解决了我的问题，但没有解决动态变化的事实复选框表单控件不会反映在DOM元素中。

角度2，动态形式; updateValue（）不更新复选框表单控件

1 个答案: