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)
})
}
}
indexto assign unique value to[(ngModel)].. This reference stackblitz.com/edit/angular-qcavpm should help you..