Angular - 如何在 ngFor 循环表中使用 formcontrol答案

【问题标题】：Angular - how to use formcontrol in ngFor loop tableAngular - 如何在 ngFor 循环表中使用 formcontrol
【发布时间】：2021-05-11 07:17:26
【问题描述】：

我是 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)

}

这里我的要求是我有三个数据人员列表

{
    "data": [
{
         "firstname":"A",
         "middlename":"A",
         "lastname":"A",
},{
         "firstname":"AA",
         "middlename":"AB",
         "lastname":"Ac",
},{
         "firstname":"AAA",
         "middlename":"ABB",
         "lastname":"ACC",
}


]
}

我需要为个人设置限制，所以我在表格中创建了表单控件并

条件二是

如何通过选中复选框但在使用提交按钮后传递单个数据，如第一个数据或一个和两个数据

例如

{
         "firstname":"A",
         "middlename":"A",
         "lastname":"A",
         "limit":"10000"
}

或

{
         "firstname":"A",
         "middlename":"A",
         "lastname":"A",
         "limit":"10000"
},
{
         "firstname":"AA",
         "middlename":"AB",
         "lastname":"AC",
         "limit":"200000"
}

如何在 submit 中选择和提交特定数据

【问题讨论】：

你可以创建FormArray。
但它就像汇总表...获取汇总，我需要通过每个人的限制以及特定数据

标签： angular angular8 angular-reactive-forms ngfor form-control

【解决方案1】：

你可以使用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>

【讨论】：