首页 文章

Angular 4 / Reactive form和json作为选择值

提问于
浏览 次
0

我在组件中创建了一个被动表单：

this.details = this.FormBuilder.group({
  status: {}
});

然后在我的模板中我有：

<select class="form-control" formControlName="status">
    <option *ngFor="let status of formValues?.status" [ngValue]="status">{{status.name}} {{status.description}}</option>
</select>

和OnChanges称：

this.details.setValue({
    status: this.data.status
  });

我的想法是，我有一个选择，必须有一个对象作为值 . 我不能将状态设置为嵌套的formGroup，因为它必须被插入到3个formControl中 . 尽管有setValue，但一切正常 . 我的选择没有获取默认数据 . 但是，当我在select中更改选项时，表单模型正确更新 .

有任何想法吗 ：）？

angular

2 回答

  • 0

    首先关闭选项的语法是： <option *ngFor="let entry of entries" [value]="entry">{{entry}}</option> 所以 value 而不是 ngValue . 其次，你需要使用双向数据，现在这些值只是从模板到模型而不是另一种方式 . 所以将 [(ngModel)] 添加到你的 select

    <select [(ngModel)]=status... >

    还有一件事我建议在表单生成器中更改名称，这样你就不会在ngFor循环 status:{} 和 *ngFor="let status of formValues?.status 中发生冲突

    使用ngModel的用法示例并从官方文档中选择（链接如下）：

    <div class =“form-group”> <label for =“power”> Hero Power </ label> <select class =“form-control”id =“power”required [（ngModel）] =“model.power “name =”power“> <option * ngFor =”let pow of powers“[value] =”pow“> {{pow}} </ option> </ select> </ div>

    [1] https://angular.io/guide/forms

    回复于
  • 0

    将此代码添加到组件：

    compareFn(c1: StatusModel, c2: StatusModel): boolean {
  return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

    而不是"StatusModel"，插入表单状态模型 .

    并在模板中添加一个绑定：

    <select class="form-control" formControlName="status"
       [compareWith]="compareFn"<!-- binding -->
    <option *ngFor="let status of formValues?.status" 
            [ngValue]="status">
        {{status.name}} {{status.description}}
    </option>
</select>
    回复于

相关问题