在Angular4应用程序上工作，我想创建一个输入组件，可以管理可以在表单中出现的不同组件，如输入，文本区域，checbox或选择 .

我做得很好，而且它很棒（或几乎）来自控制器我创建了一个元素数组，其中包含有关类型（输入，选择等），id，占位符，模型等的信息......唯一的问题我所拥有的是对于选择输入，当我尝试设置默认值时，我总是收到错误ExpressionChangedAfterItHasBeenCheckedError . 如果我不尝试设置默认值，它会消失 . 但是因为它是和编辑表单，我尝试使用相应的值预填充选择 .

我正在使用formControls .

组件模板是：

<select *ngIf="element.type == 'select'" name="{{element.id}}" 
            formControlName="{{model.id}}" class="form-control" id="{{element.id}}">
   <option *ngFor="let item of element.items" [ngValue]="item.id">{{item.text}}</option>
</select>

元素对象是：

import { SelectItem } from './select-item.model';
export class InputForm{
    title : string;
    type : string;
    model : any;
    label : string;
    placeholder : string;
    id : string;
    newRow : boolean = false;
    size : string = "col-md-12";
    required : boolean = false;
    items : SelectItem[] = [];

setSelect(id : string, model : any, label : string, required : boolean, items : SelectItem[], size : number){
        this.id = id;
        this.items = items;
        this.model = model;
        this.label = label;
        this.required = required;
        this.type = "select";
        this.size = "col-md-" + size;
    }
}

这就是我实现元素的方式：

let vat : InputForm = new InputForm();
  vat.setSelect("vat", this.item.vat, 'COMPONENT.PRODUCT.VAT', true, this.vats, 2);
  vat.newRow = true;
  this.formElement.elements.push(vat);

this.item是我正在尝试更新的对象的模型，this.vats是select中选项的所有项目 .

这就是我实现formCOntrol的方式

this.form = new FormGroup({
      vat: new FormControl(new SelectItem(this.item.vat.id, this.item.vat.name), Validators.required)
    });

SelectItem是用于填充选择中的选项的模型 . 所以它是相同的对象类型 .

所以，如果我从 new FormControl 删除 new SelectItem(this.item.vat.id, this.item.vat.name) 一切正常，除了我没有;没有选择原始值 .

javascript angular select angular2-template angular2-forms