[英]Angular patchValue of a mat-select component
在我的Angular 7应用程序中,我正在使用反应性形式的角材料组件选择垫 。
该视图如下所示:
<mat-form-field class="col-md-3" color="warn">
<mat-select placeholder="Selectionner la boutique"
id="libelleShop"
[(value)]="selectedlibelleShopoValue"
ngDefaultControl
formControlName="libelleShop"
(selectionChange)="onShopSelectionChanged($event)">
<mat-option *ngFor="let shop of shopsList"
[value]="shop">
{{shop.storeName}}
</mat-option>
</mat-select>
Md数据如下:
shopsList= [
{
'edoId': '2119',
'storeName': 'AIX LES BAINS'
},
{
'edoId': '2123',
'storeName': 'ANNEMASSE'
},
{
'edoId': '2460',
'storeName': 'ALENCON'
},
{
'edoId': '2478',
'storeName': 'Grand Evreux Carrefour'
},
{
'edoId': '2632',
'storeName': 'DESTRELAND'
}
]
第一次加载后,选项会成功显示在选择下拉列表中,并且我有一个按钮,用于在单击时强制选择垫选的值。
我已经试过了:
onClick(){
let shopObjToDisplay = {};
shopObjToDisplay['edoId'] = '2460';
shopObjToDisplay['storeName'] = 'ALENCON';
this.myForm.patchValue({'libelleShop': shopObjToDisplay });
}
似乎我的数据没有设置好。
有任何想法吗??
您需要在垫选择输入上使用compareWith函数。
例:
<select [compareWith]="compareFn" [formControl]="selectedCountriesControl">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
compareFn(c1: Country, c2: Country): boolean {
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}
用这个:-
onClick(){
let shopObjToDisplay = {};
shopObjToDisplay['edoId'] = '2460';
shopObjToDisplay['storeName'] = 'ALENCON';
this.myForm.patchValue({
libelleShop: shopObjToDisplay
});
}
一个古老的问题...您可以使用具有mat-select和patch值的triggerValue
来实现。
<mat-form-field class="full-width" appearance="fill">
<mat-select #level formControlName="level">
<mat-option value="Native Speaker">Native Speaker</mat-option>
<mat-option value="Highly Proficient">Highly Proficient</mat-option>
<mat-option value="Very Good Command">Very Good Command</mat-option>
</mat-select>
</mat-form-field>
通过以上操作,您现在可以在模板中获取值。
<div *ngIf="level.triggerValue && (level.triggerValue).length; else notSpecifiedDate" class="text-muted"
fxFlex="100">{{level.triggerValue}}</div>
<ng-template #notSpecifiedDate>
<div class="text-muted" fxFlex="100">
{{'Not Specified' | translate}}
</div>
</ng-template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.