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

任何想法：）？

Answer 1

首先关闭选项的语法是： <option *ngFor="let entry of entries" [value]="entry">{{entry}}</option> 所以value代替ngValue。其次，你需要使用双向数据，现在价值仅从模板到模型而不是其他方式。因此，将[(ngModel)]添加到您的select

<select [(ngModel)]=status...＆GT;

我建议在表单构建器中更改名称，这样你就不会在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

Answer 2

将此代码添加到组件中：

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

而不是＆＃34; StatusModel＆＃34;，插入表单状态模型。

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

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

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

2 个答案: