如何使* ngFor生成的每个输入具有自己的窗体控件
如何使* ngFor生成的每个输入具有自己的窗体控件
提问于 2020-09-18 16:48:38
我有一个表单，它有一些输入是用* ngFor重复的，但是它们是用相同的"formControlName“重复的，所以当一个人有错误时，每个人都有一个错误，我想知道是否可以让他们获得自己的formControl
component.html
<div fxFlexFill fxLayoutAlign="center center" *ngIf="sel.includes('Cobertor')">
<mat-card fxFlex="99%" class="mat-elevation-z3">
<mat-card-header>
<mat-card-title>Cobertores</mat-card-title>
<mat-card-subtitle>a {{element.name.split(" ")[0]}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div fxLayoutAlign="center center" fxLayout="row" fxLayoutGap="0.5%"
*ngFor="let elm of cobertorCount">
<mat-form-field fxFlex="80%" appearance="fill">
<mat-label>Añadir cobertor</mat-label>
<input formControlName="cobertor" type="number" matInput
placeholder="Ingresa la cantidad a añadir" #input [required]="sel.includes('Cobertor')">
</mat-form-field>
<mat-form-field appearance="fill" fxFlex="20%">
<mat-label>Tamaño</mat-label>
<mat-select>
<mat-option *ngFor="let size of sizes" [value]="size.value">
{{size.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</mat-card-content>
<!--Boton para añadir nuevo cobertor-->
<mat-card-actions>
<button mat-flat-button color="primary" (click)="add('cobertor')">
<mat-icon>add</mat-icon>
</button>
<button mat-flat-button color="warn" (click)="remove('cobertor')">
<mat-icon>remove</mat-icon>
</button>
</mat-card-actions>
</mat-card>
</div>在这里，输入显示在材料卡中，只有在激活select时才能看到，默认情况下总是有输入，但是可以再添加2条。
component.ts
dataForm = new FormGroup({
cobertor: new FormControl(null, Validators.required)
})
sizes: any[] = [
{ value: 'matrimonial', viewValue: 'Matrimonial' },
{ value: 'individual', viewValue: 'Individual' },
{ value: 'kingsize', viewValue: 'KingSize' }
];
cobertorCount: any = [1];
sel = []
add(to: string) {
switch (to) {
case "cobertor":
if (this.cobertorCount.length >= 3) {
alert("Maximo")
break;
}
this.cobertorCount.push(this.cobertorCount.length + 1);
break;
}我认为这是最重要的代码
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-18 17:55:42
为了保持相同的格式控制名，我们必须在formarray中实现它。
<form [formGroup]="dataForm">
<div formArrayName="dataArray" *ngFor="let item of dataForm.get('dataArray').controls; let i = index;">
<div [formGroupName]="i">
<input formControlName="cobertor" type="number" matInput placeholder="Ingresa la cantidad a añadir" #input [required]="sel.includes('Cobertor')">
</div>
</div>
</form>ngOnInit(){
dataForm = this.formbuilder.group({
dataArray: this.fb.array([])
})
}
setFormValues(){
dataForm = this.formbuilder.group({
dataArray: initFormArray(arrayValues)
})
}
initFormArray(units): FormArray{
const fArray = <FormArray>this.exampleForm.controls['dataArray'];
units.forEach(unit=>{
fArray.push(this.formBuilder.push({
cobertor: [unit.value]
}))
})
return fArray;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63959757
复制相关文章
相似问题
腾讯云开发者
