角度5 +角度材料选择+反应形式==不显示初始选项 [英] Angular 5 + Angular Material Select + Reactive Forms == No initial options displayed

问题描述

正如标题所说，我有一个反应式，其中包含多个<mat-select>.加载初始表单时，即使form.value显示了初始选项，也不会显示其初始选项.

As the title says, I have a reactive form that has multiple <mat-select> contained within. On initial form load, the initial option is not displayed even though form.value shows it is.

相关component.ts:

Pertinent component.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>

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

When the form loads, the selects do not display the initially selected option, however, they are set properly, apparently:

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

表单上显示的全部是占位符.

All that displays on the form is the placeholder.

这似乎不应该那么困难.

This seems like it should not be this difficult.

我在做什么错了?

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

this.jobTypes is loaded when the module is loaded, and it is a BehaviorSubject that lives in my data service. I subscribe to it in the constructor of this component thusly:

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

推荐答案

几件事

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.

在角度上，将属性指定为value和[value]之间是有区别的.当将属性包含在方括号[]中时，它将被解释为 javascript/角度模板脚本(我认为与{{}}相同).如果括号中没有 ，则将其解释为字符串(即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">

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,
        ...
    });
}

这篇关于角度5 +角度材料选择+反应形式==不显示初始选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！