所以我用补丁值加载我的表单,出于某种原因,mat-select 没有根据值进行选择。
这是我所拥有的:
constructor(private _formBuilder: FormBuilder,
private productServices : ProductsService,
private activatedRoute: ActivatedRoute,
private router : Router) {
this.moods=[
{mood: 'steak-0', viewValue: 'Steak'},
{mood: 'pizza-1', viewValue: 'Pizza'},
{mood: 'tacos-2', viewValue: 'Tacos'}
];
}
ngOnInit() {
this.completeProfileForm = this._formBuilder.group({
title :['',Validators.required],
releaseDate: ['', Validators.required],
resolution: ['', Validators.required],
displayName: ['', Validators.required],
description: ['', Validators.required],
type: ['', Validators.required],
primary_mood: ['', Validators.required],
secondary_mood: ['', Validators.required],
price: [null, Validators.required],
});
}
<mat-form-field class="form-field" appearance="fill">
<mat-label>Primary Mood</mat-label>
<mat-select formControlName="primary_mood" >
<mat-option *ngFor="let mood of moods" [value]="mood.value">
{{mood.mood}}
</mat-option>
</mat-select>
<mat-error *ngIf="completeProfileForm.controls.primary_mood.touched && completeProfileForm.controls.primary_mood.invalid">
<span *ngIf="completeProfileForm.controls.primary_mood.errors.required">Please select your artwork Type.</span>
</mat-error>
</mat-form-field>
i tried to select any of the options the options not selected
你们能帮我吗
答案 0 :(得分:0)
我同意朱利安刘。您的 HTML 中有拼写错误。你说
[value]="mood.value"
但在您的对象中,该字段名为 viewValue
。
以这种方式更正您的 HTML:
<mat-option *ngFor="let mood of moods" [value]="mood.viewValue">
{{mood.mood}}
</mat-option>
要查看您的结果,请保留我的进一步建议,并将这段代码放在 ngOnInit()
的末尾。
this.completeProfileForm.get('primary_mood').valueChanges.subscribe(selection => console.log('you selected: ' + selection));
您现在应该会在控制台中看到您的选择。现在你必须找到一种方法来利用它。