如何让 * ngFor 生成的每个输入都有自己的表单控件
How to get each input generated by * ngFor to have its own form control
我有一个表单,其中有一些输入用 * 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>
此处输入显示在 material 卡片中,只有在激活 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;
}
我认为是所有最重要的代码
为了保持相同的 formcontrolname 我们必须在 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;
}
我有一个表单,其中有一些输入用 * 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>
此处输入显示在 material 卡片中,只有在激活 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;
}
我认为是所有最重要的代码
为了保持相同的 formcontrolname 我们必须在 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;
}