问题描述
我是 angular 8。在这里我在数据摘要中创建表单控件时遇到了一些错误
<table>
<thead>
<tr >
<th>Sl.No</th>
<th> First Name </th>
<th> Middle Name </th>
<th> Last Name </th>
<th> Limit </th>
<th>Select Data</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of PersonList; index as i">
<td>{{i+1}}</td>
<td>{{data .firstname}}</td>
<td>{{data .middlename}}</td>
<td>{{data .lastname}}</td>
<td>
<span>{{limit.value}}</span>
<mat-slider #limit
step="1" min=0 max=100 [formControl]="limit"></mat-slider>
</td>
<section class="example-section">
<mat-checkBox class="example-margin"
></mat-checkBox>
</section>
</tr>
<button class="btn btn-outline-primary"
(click)="dataset( PersonList)">Submit</button>
</tbody>
</table>
我的 ts 文件是
limit = new FormControl('');
dataset(data){
console.log('data',data)
}
这里我的要求是我有三个数据personlist
{
"data": [
{
"firstname":"A","middlename":"A","lastname":"A",},{
"firstname":"AA","middlename":"AB","lastname":"Ac",{
"firstname":"AAA","middlename":"ABB","lastname":"ACC",}
]
}
我需要为个人设置限制,所以我在表格中创建了表单控件
条件二是
如何通过选中复选框但在使用提交按钮后传递单个数据,如第一个数据或一个和两个数据
例如
{
"firstname":"A","limit":"10000"
}
或
{
"firstname":"A","limit":"10000"
},"lastname":"AC","limit":"200000"
}
如何在提交中选择和提交特定数据
解决方法
您可以使用 FormArray
let formArray = new FormArray([]);
for(let i of data) {
formArray.push(
new FormGroup({
'firstname': new FormControl(data.firstname);
'middlename': new FormControl(data.firstname);
'lastname': new FormControl(data.firstname);
'limit': new FormControl(null);
})
)
this.formGroup = new FormGroup({
'data': formArray
});
}
然后你可以添加这个功能
get controls() {
return (<FormArray>this.formGroup.get('data')).controls;
}
然后在你的 HTML 中
<tbody formArrayName="data">
<tr *ngFor="let dataCtrl of controls; let i = index" [formGroupName]="i">
<td>{{i+1}}</td>
<td>{{dataCtrl.value.firstname}}</td>
<td>{{dataCtrl.value.middlename}}</td>
<td>{{dataCtrl.value.lastname}}</td>
<td>
<span>{{dataCtrl.value.limit}}</span>
<mat-slider #limit step="1" min=0 max=100 formControlName="limit">
</mat-slider>
</td>
<section class="example-section">
<mat-checkbox class="example-margin"></mat-checkbox>
</section>
</tr>
</tbody>