Angular 5 + Angular Material Select + Reactive Forms == 没有显示初始选项

Question

正如标题所说，我有一个包含多个 <mat-select> 的响应式(Reactive)表单包含在。在初始表单加载时，即使 form.value 也不会显示初始选项显示它是。

相关组件.ts:

export class DesJobInfoEditComponent implements OnInit {

...

currentJobData: IJob;
jobTypes: IJobType[];

...

constructor(private fb: FormBuilder) {

    ...

        // Construct forms
        this.createForm();

        this.initializeForm();

}

createForm() {
    this.editJobInfoForm = this.fb.group({
        ...
        JobType: '', // mat-select
        ...
    });
}

initializeForm() {
    this.rebuildForm();
}

rebuildForm() {
    this.editJobInfoForm.reset({
        ...
        JobType: this.jobTypes[this.currentJobData.JobType].DisplayDesc,
        ...
    });
}

相关的html:

<mat-form-field fxFlex>
      <mat-label>Job Type</mat-label>
       <mat-select formControlName="JobType" placeholder="Job Type">
              <mat-option *ngFor="let jobType of jobTypes" value="jobType.value">
                     {{ jobType.DisplayDesc }}
               </mat-option>
        </mat-select>
  </mat-form-field>

当表单加载时，选择不显示最初选择的选项，但是，它们设置正确，显然:

Form value { ... "JobType": "0 - Standard", ... } 

所有显示在表单上的都是占位符。

这看起来不应该这么难。

我做错了什么？

编辑:

this.jobTypes在加载模块时加载，它是一个存在于我的数据服务中的 BehaviorSubject。我在这个组件的构造函数中订阅了它:

this.data.jobTypes.subscribe(jobTypes => { this.jobTypes = jobTypes });

Answer 1

一些事情

1. [formControlName] 必须与[formGroup]一起使用.如果你不想使用 [formControlName] + [formGroup] , 你可以使用 [formControl]相反。

2. 在 Angular 中，将属性指定为 value 是有区别的和 [value] .当属性用方括号括起来时 [] ，它被解释为 javascript/ Angular 模板脚本(我认为与 {{}} 相同)。当不括在方括号中时，它被解释为一个字符串(即value="jobType.value" === [value]="'jobType.value'"和[value]="jobType.value" === value="{{jobType.value}}"(其实我觉得有细微差别在 [value]="jobType.value" 和 value="{{jobType.value}}" 之间，但 w/e))。所以当你写 <mat-option *ngFor="let jobType of jobTypes" value="jobType.value"> , 每个 mat-option 的值是"jobType.value"我想，这不是你想要的。所以需要把代码改成<mat-option *ngFor="let jobType of jobTypes" [value]="jobType.value">

例如

<mat-form-field [formGroup]='editJobInfoForm' fxFlex>
  <mat-label>Job Type</mat-label>
  <mat-select formControlName="JobType" placeholder="Job Type">
    <mat-option *ngFor="let jobType of jobTypes" [value]="jobType.value">
      {{ jobType.DisplayDesc }}
    </mat-option>
  </mat-select>
</mat-form-field>

与您的问题有些无关，为什么同时拥有 createForm()和 initializeForm()方法？为什么不简单

constructor(private fb: FormBuilder) {

    ...

        // Construct forms
        this.createForm();    
}

createForm() {
    this.editJobInfoForm = this.fb.group({
        ...
        JobType: this.jobTypes[this.currentJobData.JobType].DisplayDesc,
        ...
    });
}