更新时间:2023-12-02 23:40:28
一些事情
[formControlName]
必须与[formGroup]
结合使用.如果不想使用[formControlName]
+ [formGroup]
,可以使用[formControl]
代替.
[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,
...
});
}