如何在动态窗体的mat选择中显示默认值？
如何在动态窗体的mat选择中显示默认值？
提问于 2022-08-11 18:31:21
我正在用角度材料更新一个项目到角14，我已经生成了一个带有几个字段的通用表单，但是mat-select没有保留默认的选项。
我正在从FormControl生成动态component.ts，如果显示值，则生成文本字段，但mat不是。
这是我的component.html：
<div [formGroup]="formDialog" mat-dialog-content *ngFor="let column of data.columns">
<mat-form-field *ngIf="column != 'province'">
<input matInput [formControlName]="column" [placeholder]="column">
</mat-form-field>
<mat-form-field *ngIf="column == 'province'">
<mat-label>{{ column }}</mat-label>
<mat-select [formControlName]="column" (valueChange)="currProvince($event)">
<mat-option *ngFor="let item of geoProvinces" [value]="item">
{{ item.nm }}
</mat-option>
</mat-select>
</mat-form-field>
</div>这是我的component.ts：
////////////
this.data.dataRow = {
"name":"test3Prov",
"phoneNumber":123456,
"province":"Madrid"
}
//////////////
ngOnInit(): void {
this.getGeoAPI();
let fieldControls = {};
Object.entries(this.data.dataRow).forEach(([key, value]) => {
fieldControls[key] = new FormControl(value || '');
})
this.formDialog = new FormGroup(fieldControls)
}这是获得各省的方法：
getGeoAPI(): void {
this.genericService.getPath('geoApi').subscribe((elem: any) => {
this.geoProvinces = elem.provinces
})
}这是this.geoProvinces的一个例子
[
{
"id":"01",
"nm":"Álava"
},
{
"id":"02",
"nm":"Albacete"
},
{
"id":"03",
"nm":"Alicante"
}
]这是一张截图，表格显示如下：
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-08-12 10:01:14
问题是您的mat-select是一个对象数组的填充，而您的formControl值是一个字符串。
我想你可以在你的垫子中使用-选择作为值"item.nm“(或者你在数组中有什么属性)。
<mat-option *ngFor="let item of geoProvinces" [value]="item.nm">
{{ item.nm }}
</mat-option>顺便说一句，如果我们可以将一个对象存储在选项ngValue中而不是值中
另一个选项是，您确实希望将“对象”存储在formControl中，在本例中，您可以将其添加到ngOnInit中。
Object.entries(this.data.dataRow).forEach(([key, value]) => {
...
})
this.formDialog = new FormGroup(fieldControls
const control=this.formDialog.get('province')
if (control && control.value)
{
const province=this.geoProvinces.find(x=>x.nm==control.value)
control.setValue(province?province:null)
}更新
//The array geoProvince is in the way
[{"id":"01","nm":"Álava"} ..]
//And our data in the way
{"name":"test3Prov",
"phoneNumber":123456,
"province":"Madrid"
}因此，首先我们需要考虑一下我们可以在FormControl“省”储存什么
我们可以储存“省名”
const fieldControls: any = {};
Object.entries(this.data.dataRow).forEach(([key, value]) => {
fieldControls[key] = new FormControl(value || '');
})
this.formDialog = new FormGroup(fieldControls)
//the ng-select like -see mat-option [value]="item.nm"
<mat-select [formControlName]="column"(selectionChange)="currProvince($event)">
<mat-option *ngFor="let item of geoProvinces"
[value]="item.nm">
{{ item.nm }}
</mat-option>
</mat-select>我们可以储存该省的“身份证”。
const fieldControls: any = {};
Object.entries(this.data.dataRow).forEach(([key, value]) => {
//we check if we are creating the formControl province
//if true we asing the "id"
if (key=="province"){
const prov=this.geoProvinces.find(x=>x.nm==value)
fieldControls[key] = new FormControl(prov?prov.id:null || '');
}
else
fieldControls[key] = new FormControl(value || '');
})
this.formDialog = new FormGroup(fieldControls)
//the ng-select like -see mat-option [value]="item.id"
<mat-select [formControlName]="column"(selectionChange)="currProvince($event)">
<mat-option *ngFor="let item of geoProvinces"
[value]="item.id">
{{ item.nm }}
</mat-option>
</mat-select>我们可以储存整个物体。我们需要考虑的是，如果我们存储一个对象，或者我们指定对象(在数组geoProvinces中搜索)，或者我们使用属性"compareWith“
将整个对象搜索存储在数组geoProvinces中
const fieldControls: any = {};
Object.entries(this.data.dataRow).forEach(([key, value]) => {
//we check if we are creating the formControl province
//if true we asing the element
if (key=="province"){
const prov=this.geoProvinces.find(x=>x.nm==value)
fieldControls[key] = new FormControl(prov?prov:null || '');
}
else
fieldControls[key] = new FormControl(value || '');
})
this.formDialog = new FormGroup(fieldControls)
//the ng-select like -see mat-option [value]="item"
<mat-select [formControlName]="column"(selectionChange)="currProvince($event)">
<mat-option *ngFor="let item of geoProvinces"
[value]="item">
{{ item.nm }}
</mat-option>
</mat-select>使用"compareWith“
const fieldControls: any = {};
Object.entries(this.data.dataRow).forEach(([key, value]) => {
if (key=="province"){ //create "on-fly" and object"
fieldControls[key] = new FormControl({nm:value || ''});
else
fieldControls[key] = new FormControl(value || '');
})
this.formDialog = new FormGroup(fieldControls)
//the ng-select like -see mat-option [value]="item"
//see also the [compareWith]="compareProvince"
<mat-select [formControlName]="column"
[compareWith]="compareProvince"
(selectionChange)="currProvince($event)">
<mat-option *ngFor="let item of geoProvinces"
[value]="item">
{{ item.nm }}
</mat-option>
</mat-select>
//and we declare compareProvince in .ts
compareProvince = (a: any, b: any) => a.nm == b.nm;Stack Overflow用户
发布于 2022-08-12 08:37:28
您不需要这样做，如果您最初给您的formControlName值，我认为它应该显示它。
尝试将[formControlName]='column'更改为[formControlName]='province'，这应该有效，因为您已经在.ts文件中给了它一个值！
不要使用valueChange()，使用selectionChange()！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73325375
复制相关文章
相似问题
腾讯云开发者
