且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-12-02 23:40:28

一些事情

  1. [formControlName] 必须[formGroup]结合使用.如果不想使用[formControlName] + [formGroup],可以使用[formControl]代替.

  1. [formControlName] must be used in conjunction with [formGroup]. If you don't want to use [formControlName] + [formGroup], you can use [formControl] instead.

在 angular 中,将属性指定为 value[value] 是有区别的.当一个属性被括在括号 [] 中时,它被解释为 javascript/ 角度模板脚本(与 {{}} 相同,我认为).当它not括在括号中时,它被解释为一个字符串(即value="jobType.value" === [value]="'jobType.value'"[value]="jobType.value" === value="{{jobType.value}}" (实际上我认为[value]="jobType.value"value="{{jobType.value}}" 之间存在细微差别,但 w/e)).所以当你写时,每个mat-option的值是"jobType.value" 我想这不是你想要的.所以需要把代码改成

In angular, there is a difference between specifying an attribute as value and [value]. When an attribute is enclosed in brackets [], it is interpreted as javascript / angular template script (same as {{}}, I think). When it is not enclosed in brackets, it is interpreted as a string (i.e. value="jobType.value" === [value]="'jobType.value'" and [value]="jobType.value" === value="{{jobType.value}}" (actually I think there are subtle differences between [value]="jobType.value" and value="{{jobType.value}}", but w/e)). So when you write <mat-option *ngFor="let jobType of jobTypes" value="jobType.value">, the value of every mat-option is "jobType.value" which, I imagine, isn't want you want. So you need to change the code to <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() 方法?为什么不简单

Somewhat unrelated to your problem, why have both createForm() and initializeForm() methods? Why not simply

constructor(private fb: FormBuilder) {

    ...

        // Construct forms
        this.createForm();    
}

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