角度FormArray:从二维Javascript数组创建表格表单 我需要创建一个带有Angular的表格,它基于一个简单的二维数组 数据结构简单,但单元中的数据是相互依赖的。单个单元格仅通过索引访问,例如,行:1,列:0 需要在单元级别定义自定义验证器。此外,行和列可能有验证器
我尝试了各种方法来定义角度FormArray:从二维Javascript数组创建表格表单 我需要创建一个带有Angular的表格,它基于一个简单的二维数组 数据结构简单,但单元中的数据是相互依赖的。单个单元格仅通过索引访问,例如,行:1,列:0 需要在单元级别定义自定义验证器。此外,行和列可能有验证器,javascript,arrays,angular,formarray,Javascript,Arrays,Angular,Formarray,我尝试了各种方法来定义FormArray持有FormControls数组。但我不确定如何在Angular模板中单独通过行和列索引访问相应的FormControl 型号 [ ['a', 'b'], ['c', 'd'] ] FormGroup form = new FormGroup({ rows: new FormArray([...]) }); 预期结果 我尝试过各种类似的事情: <form [formGroup]="form""> <
FormArray
持有FormControl
s数组。但我不确定如何在Angular模板中单独通过行和列索引访问相应的FormControl
型号
[
['a', 'b'],
['c', 'd']
]
FormGroup
form = new FormGroup({
rows: new FormArray([...])
});
预期结果
我尝试过各种类似的事情:
<form [formGroup]="form"">
<div formArrayName="rows">
<div
*ngFor="let row of rows.controls; let rowIndex = index" [formGroupName]="rowIndex">
<div formArrayName="cols">
<div
*ngFor="let col of form.get('cols').controls; let colIndex = index"
[formGroupName]="colIndex">
<input [formControlName]="colIndex" />
</div>
</div>
</div>
</div>
</form>
达贝尔,如果你有一个数组,那就创建一个formarray of formarray(不好意思开玩笑) 好吧,想象一下你有 资料=[ ['a','b'], ['c','d'] ] 您可以在ngOnInit中创建formArray的formArray,如
//At firs a empty FormArray
this.formArray = new FormArray([]);
//with each element of data
this.data.forEach(x => {
//x is e.g.['a','b']
//we create a emptt FormArray
const obj = new FormArray([]);
//add a FormControl
x.forEach(y => {
obj.push(new FormControl(y));
});
//and push in the formArray
this.formArray.push(obj);
});
或使用类似于地图的
this.formArray=new FormArray(
this.data.map(x=>new FormArray(
x.map(y=>new FormControl(y))))
)
那么,如何在FormGroup之外管理FormArray?如果我们的FormArray是FormGroup的FormArray,我们通常
<!--yes we can use [formGroup] with a FormArray-->
<form [formGroup]="formArray">
<!--iterate over the formArray.controls, that is a formGroup-->
<div *ngFor="let group of formArray.controls;let i=index">
<div [formGroup]="group">
<input formControlName="name">
...
</div>
</div>
</form>
我们的验证器可以是
rowValidator()
{
return (array:FormArray)=> {
const invalid:boolean=array.value.
filter((x,index)=>array.value.indexOf(x)!=index).length>0
return invalid?{error:'must be different'}:null
}
}
arrayValidator()
{
return (array:FormArray)=> {
let arrayJoin="";
array.value.forEach(x=>arrayJoin+=x.join(''))
return arrayJoin=="abcd"?null:{error:'must be a,b,c,d'}
}
}
你可以在地图上看到
注意:在实际应用程序中,我们不需要使用这么多的验证器。考虑到应用程序性能验证程序的成本,模板表单将使您的生活更加轻松 只需直接绑定到数组本身
<form>
<div *ngFor="let row of data;let i=index">
<input [name]="prop1_ + i" [(ngModel)]="row.prop1">
<input [name]="prop2_ + i" [(ngModel)]="row.prop2">
</div>
</form>
My library Easy Angular有一个简单易用的表格组件。StackBlitz演示感谢您的详细解释,Eliseo!当然,你对Formaray of FormArray的看法是对的。为了让其他人受益,我只想在本例中提到
formArray.status
和formArray.invalid
也适用于formArray
。再次感谢您的详细解释。
rowValidator()
{
return (array:FormArray)=> {
const invalid:boolean=array.value.
filter((x,index)=>array.value.indexOf(x)!=index).length>0
return invalid?{error:'must be different'}:null
}
}
arrayValidator()
{
return (array:FormArray)=> {
let arrayJoin="";
array.value.forEach(x=>arrayJoin+=x.join(''))
return arrayJoin=="abcd"?null:{error:'must be a,b,c,d'}
}
}
<form>
<div *ngFor="let row of data;let i=index">
<input [name]="prop1_ + i" [(ngModel)]="row.prop1">
<input [name]="prop2_ + i" [(ngModel)]="row.prop2">
</div>
</form>