Angular - how to use formcontrol in ngFor loop table

Question

I am angular 8. Here I am facing some error in while creating formcontrol in data summary

<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>

and my ts file is

limit = new FormControl('');

dataset(data){
    
console.log('data', data)

}

here my requirement is I have three data personlist

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


]
}

I need to set limit for the individual person so i created the formcontrol in table and

condition number two is

how to pass the individual data like 1st data or both one and two by selecting the check box but after using submit button

for example

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

or

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

How to select and submit particular data in submit

Answer 1

You can use 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
    });
}

Then you can add this function

get controls() {
    return (<FormArray>this.formGroup.get('data')).controls;
}

Then in your 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>