Angular 2. 以数据驱动形式设置 ControlGroup 的值答案

【问题标题】：Angular 2. Set value of ControlGroup in data driven formAngular 2. 以数据驱动形式设置 ControlGroup 的值
【发布时间】：2016-08-16 22:16:19
【问题描述】：

假设我有这个模型：

export class MyModel {
    constructor(
        public id: number,
        public name: string
    ) {}
}

还有这个控制组：

export class MyComponent {
    form: ControlGroup;
    model: MyModel;

    constructor(builder: FormBuilder) {
        this.form = this.builder({
            'id' : [''],
            'name' : ['']
        })
    }
}

要获取表单的数据，我可以简单地这样做（如果字段名称匹配）：

this.model = this.form.value;

但是我怎样才能以同样的方式设置表单的值呢？

something like: this.form.value = model;

收到以下错误：无法设置只有 getter 的 # 的属性值

谢谢！

UPD：根据 Günter Zöchbauer 在下面的建议，我最终使用了该辅助方法：

setFormValues(form: ControlGroup, model: any) {

    for(var key in model) {
        var ctrl = (<Control>form.controls[key]);
        if ( ctrl != undefined )
            ctrl.updateValue(model[key]);
    }
}

【问题讨论】：

标签： forms data-binding angular data-driven

【解决方案1】：

this.builder.group(...) 返回的ControlGroup 不支持设置值。要设置值，您必须在每个控件上单独设置它，例如：

  setValue() {
    let value = {id: 'xxx', name: 'yyy'};
    Object.keys(value).forEach((k) => {
      this.form.controls[k].updateValue(value[k]);
    });
  }

Plunker example

【讨论】：

谢谢。不得不制作一些模组，但最终奏效了。不将此标记为已接受的答案，因为这是一种解决方法。希望他们会在未来的版本中实现这样的功能，并且有人会在这里提到它。但我赞成你的评论。