In Angular how to load the radio button value when we click on Edit option

Question

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 edit button the form is not loading with the radio button values and when i click on Update button the data should be affected into the Data table.

app.component.html

<div class="col-sm-10"> 
     <input type="radio" name="gender" [(ngModel)]="model.gender" value="male" checked> Male                         
     <input type="radio" name="gender" [(ngModel)]="model.gender" value="female"> Female<br>
 </div>
<button type="submit" class="btn btn-default" (click)="addEmployee()">Save</button>
<a class="btn btn-success" (click)="editEmployee(i)">Edit</a>
<button type="submit" class="btn btn-default" (click)="updateEmployee()">Update</button>

this is my app.component.ts

myValue;
  editEmployee(k){
    this.model2.name = this.employees[k].name;
    this.model2.DOB=this.employees[k].DOB;
    this.model2.mob = this.employees[k].mob;
    this.myValue = k;
  }

  updateEmployee(){
    let k= this.myValue;
    for(let i=0; i<this.employees.length;i++){
      if(i==k){
        this.employees[i]= this.model2;
        this.model2 = {};   
        this.msg = "Record is successfully updated..... ";
      }
    }  
  }

Use model.gender = this.employees[k].gender in EDIT method. If not, Please refer this url embed.plnkr.co/plunk/quf8T5 — sankar
– sankar, Commented Oct 22, 2018 at 11:07

yannick · Accepted Answer · 2018-10-22 11:02:56Z

0

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

answered Oct 22, 2018 at 11:02

yannick

7251 gold badge11 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sunil · Accepted Answer · 2018-10-22 11:21:28Z

0

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..... ";
    }
  }

answered Oct 22, 2018 at 11:21

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

1 Comment

AVINASH M Over a year ago

please check my post i have updated it. Seriously I'm not getting how to perform that.

Collectives™ on Stack Overflow

In Angular how to load the radio button value when we click on Edit option

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related