0

I've been trying to a check button on each group of radio buttons in angular using ngFor and it's working only on the last group of the loop i.e. only a button on the last radio group is checked. How can I make a button on each radio group of the loop get checked? That is the code below. I'm using Angular 8

html file

<form >
  <div class="row px-5">
    <div class="col-sm-12 col-md-4 px-4" *ngFor="let data of myData">
        <input class="form-control mt-3" type="text"  value="{{data.name}}" name="name" />

        <div *ngFor="let status of accessorStatus">
             <input class="" type="radio" name="statuses" [value]="status" [(ngModel)]="data.status"/><span class="text-white ctrl-font ml-2">{{status}}</span>
         </div>
    </div>
    <div class="text-right py-5">
       <button  class="save-btn py-3 px-5 ml-4 mr-5" type="submit" (click)="saveUpdate()">save</button> 
    </div>
</form>

ts file

import { Component, OnInit } from "@angular/core";
import { PortalService } from '../portal.service';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormArray, FormGroup } from '@angular/forms';

@Component({
    templateUrl: './edit-candidate.component.html',
    styleUrls: ['./edit.component.css']
})

export class EditComponent implements OnInit{

    public candidate
    public accessors = [];
    public accessorStatus = [
        'sent', 'received', 'accepted', 'disproved'
    ];

    constructor(private portalService: PortalService,
        private route : ActivatedRoute, private fb: FormBuilder,
        private router : Router
        ){
    }

    ngOnInit(){

        this.getCandidate(this.route.snapshot.params['id']) 
    }

    getCandidate(id){
        this.portalService.getCandidate(id)
        .subscribe((data) => {
            this.candidate = data;
            data.accessor.map(item => {
                this.accessors.push(item);
            });
        })
    }
    saveUpdate(){
        let id = this.route.snapshot.paramMap.get('id')
    this.portalService.updateCandidate(id, this.accessors).subscribe((data)=> {
        this.router.navigate(['candidate-list'])
        console.log(data)
    })        
    }
}
1

1 Answer 1

1

You need give a different name for each "data". add a let i=index in the outer loop and use [name]="'statuses'+i"

<div *ngFor="let data of myData;let i=index">
    ...
    <div *ngFor="let status of accessorStatus">
       <input class="" type="radio" [name]="'statuses'+i" [value]="status" ...>
   </div>
</div>
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks... I've discovered that the issue is with the "name" attribute

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.