In Angular How To Load The Radio Button Value When We Click On Edit Option

In Angular How to Load the radio button value when i click on edit form button. This is my UI. when i click on save the data is inserted into the data Table. But when i click on

Solution 1:

The data binding with radio buttons work with the value attribute and is not dependent of the checked attribute. So if you set e.g. "male" as default in your model it will be selected in the template.

So to load the gender just access model.gender which is either "male" or "female". And to update Angulars Two-way databading should do it for you whenever you click on one of the radiobuttons, because it will update your model automatically.

https://stackblitz.com/edit/angular-eferut?file=src%2Fapp%2Fapp.component.html

Solution 2:

Your html is looking fine you need to make the change in ts file. Basically name model12 is wrong and you don't need to assign the single value separately.

Your code will look like -

  model;
  selectedIndex;

  editEmployee(k){
    this.selectedIndex = k;
    this.model = Object.assign({},this.employees[k]);
  }

  updateEmployee(){

    if(this.employees[this.selectedIndex]){
      Object.assign(this.employees[this.selectedIndex], this.model);
       this.msg = "Record is successfully updated..... ";
    }else{
      this.employees.push(Object.assign({}, this.model));
      this.msg = "Record is successfully added..... ";
    }
  }