How to change a array values with a radio button in Angular

Issue

I'm setting a array of objets phones where each phone has a role this role is main or secundary, I want to update the main with a radio button and this update my object list this is my code

HTML

<section *ngFor="let phone of phoneList; let index = index">
    <!-- test 1 -->
    <input [checked]="phone.phoneRole==='main'" type="radio" id="phoneTest{{index}}" name="phoneRoleTest">
    <!-- test 2 -->
    <input [(ngModel)]="phone.phoneRole" type="radio" id="phone{{index}}" name="phoneRole">
    <form >
        <input id="phoneNumber{{index}}" [disabled]="true" value="{{phone.phoneNumber}}">
        <button [disabled]="phone.phoneRole==='main'" (click)="editPhone(phone)">edit</button>
        <button type="button" [disabled]="phone.phoneRole==='main'" (click)="deletePhone(phone)">x</button>
    </form>
</section>

<form (ngSubmit)="f.form.valid && onAddPhone()" #f="ngForm">
    <!-- N phones input -->
    <label for="phoneNumberInput">Phone Number:</label>
    <input required class="m-1 col-md-2" type="tel" name="tel" id="phoneNumber" placeholder="Phone number" [(ngModel)]="phoneNumberInput">
    <button>+</button>
</form>

Component TS

export class CreateCustomerComponent implements OnInit {
  phoneNumberInput: string = '';
  phoneList: PhoneNumber[] = [];
  phoneIndex: number = 0;

  phoneRole: string = 'main';

  constructor(private phoneService: PhoneService) {}

  ngOnInit(): void {
    // set the phoneList from the service to the local phoneList
    this.phoneList = this.phoneService.phoneList;
  }

  create(){

  }
  onAddPhone() {
    // create first obj
    if (this.phoneList.length < 1) {
      var newPhone = new PhoneNumber(this.phoneNumberInput, this.phoneRole);
    } else {
      // create new obj phoneNumber
      this.phoneRole = 'secundary';
      var newPhone = new PhoneNumber(this.phoneNumberInput, this.phoneRole);
    }
    // add phoneNumber to phoneList
    this.phoneService.addPhone(newPhone);
  }

  editPhone(phone: PhoneNumber) {
    if (phone.phoneRole === 'main') {
      alert('No editable');
    } else {
    }
  }

  deletePhone(phoneNumber: PhoneNumber) {
    this.phoneService.delete(phoneNumber);
  }
}

Service TS

import { PhoneNumber } from "./phoneNumber.component";

export class PhoneService{

    phoneList: PhoneNumber[]=[];

    addPhone(newPhone:PhoneNumber){
        // add phoneNumber to phoneList
        this.phoneList.push(newPhone);
    };

    delete(phoneNumber: PhoneNumber){
        // delete phoneNumber of the phoneList
        const index: number = this.phoneList.indexOf(phoneNumber);
        this.phoneList.splice(index,1);
    };

}

I just want to know how to can set with a radio button (if it is possible) the main phone in my objects array, thanks for your time c:

Solution

I found a way to update the array of phones objects with the next structure

the html of the radio button

<input
        [checked]="phone.mainPhone && !phone.editPhone"
        [disabled]="phone.editPhone"
        (change)="radioChangeHandler(index)"
        type="radio"
        id="phoneTest{{ index }}"
      />

the TS of that button

// set the main phone
  radioChangeHandler(index: number) {
    if (!this.phoneList[index].editPhone) {
      for (let index = 0; index < this.phoneList.length; index++) {
        this.phoneList[index].mainPhone = false;
      }
      this.phoneList[index].mainPhone = true;
    } else {
      alert('You must save the change in the phone before select this as main');
    }
  }

Answered By - WhiteAB