我正在使用反应形式和角度材料垫选择创建一个表单,并启用多项选择。我有一个要在 mat select 中加载的对象列表,并希望在默认情况下预先选择该列表中的一些项目。
默认选择适用于字符串(下例中的苏打水),默认项目显示为选中图标,并且垫选择元素值已加载它们,如果我添加更多项目,它们将添加到值字段中的现有项目中。
但是我想在垫选择中加载的项目是对象(在下面的示例中为energyDrinks),当我为垫选择字段设置值时,即使字段值设置正确,默认情况下也不会检查它们。此外,如果我添加一个项目,值字段中的现有数据将被新项目覆盖。
有什么方法可以让我在 UI 选择框中检查预选项目,并让新添加的项目添加 mat-select 元素的现有值?
提前致谢
以下是示例代码 -
html -
<form [formGroup]="drinkCategory">
<mat-form-field class="full-width">
<mat-select multiple formControlName="sodaName">
<mat-option *ngFor="let soda of sodaList" [value]="soda">
{{soda}}
</mat-option>
</mat-select>
</mat-form-field>
<p>{{drinkCategory.get('sodaName').value | json}}</p>
<mat-form-field class="full-width">
<mat-select multiple formControlName="energyDrinkName">
<mat-option *ngFor="let energyDrink of energyDrinksList" [value]="energyDrink">
{{energyDrink.name}}
</mat-option>
</mat-select>
</mat-form-field>
<p>{{drinkCategory.get('energyDrinkName').value | json}}</p>
</form>
ts 文件 -
import { Component , ViewChild} from '@angular/core';
import { FormBuilder, FormGroup,FormControl,Validators } from '@angular/forms';
@Component({
selector: 'drink-example',
styleUrls: ['drink-example.css'],
templateUrl: 'drink-example.html',
})
export class DrinkExample {
drinkCategory: FormGroup;
sodaList =['coke','pepsi','sprite'];
selecteSodas =['coke','sprite'];
energyDrinksList=[{
id:'1',
name:'redbull'
},{
id:'2',
name:'monster'
},{
id:'3',
name:'gatorade'
}];
selectedEnergyDrinks=[{
id:'1',
name:'redbull'
}];
constructor(private fb: FormBuilder){}
ngOnInit() {
this.drinkCategory = this.fb.group({
sodaName: [null, Validators.required],
energyDrinkName:[null, Validators.required]
});
this.drinkCategory.get('sodaName').setValue(this.selecteSodas);
this.drinkCategory.get('energyDrinkName').setValue(this.selectedEnergyDrinks);
}
}