forms - Angular 2. 以数据驱动形式设置 ControlGroup 的值

Question

假设我有这个模型：

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 的 #<AbstractControl> 的属性值

谢谢！

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]);
    }
}

Answer 1

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

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

Plunker 示例