时间戳

首页 > 解决方案 > Angular - 如何在 ngFor 循环表中使用 formcontrol

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

问题描述

我是 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"
}

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

标签： angularangular8angular-reactive-formsngforform-control

解决方案

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

推荐阅读