Question

使用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是选择中将成为选项的所有项目。

这就是我实现formCOntrol的方式

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

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

因此，如果我从new SelectItem(this.item.vat.id, this.item.vat.name)移除new FormControl一切正常，除了我没有选择原始值。

使用带有select的组件时获取ExpressionChangedAfterItHasBeenCheckedError

0 个答案: