Angular 4 / 反应形式和 json 作为选择值

Question

我在组件中创建了一个响应式表单：

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，但一切正常。我的选择没有获得默认数据。但是，当我在选择中更改选项时，表单模型会正确更新。

有什么想法:)？

Answer 1

将此代码添加到组件中：

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>

Answer 2

首先，选项的语法是： <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