Using NgModel to bind to radio group input for Angular Material

Question

I have a radio group that I want to set the value of from my component code. However I cannot seem to set the initial value using [(ngModel)]. I don't get any errors or anything to show why it is not showing the radio button selected.

<div class="form-group">
  <mat-radio-group  [(ngModel)]="selectedStatus" formControlName="completed">
    <mat-radio-button  [value]="1">Call Complete</mat-radio-button>
    <mat-radio-button [value]="2">Call Incomplete</mat-radio-button>
  </mat-radio-group>
</div>

Component code snippets:

selectedStatus: Array<string>;

private initForm() {
    this.eventEditForm = new FormGroup({          
      'completed': new FormControl()
      });          
      this.selectedStatus = this.data[0].completed;
    }

this.data[0].completed returns 1 or 2 from a data service.

Well, selectedStatus is supposed to be 1, or 2. But you declared it as an Array<string>. It should be a number, because 1, and 2, are numbers. The compiler error message should tell you that. Why don't you read it? — JB Nizet
– JB Nizet, Commented Dec 2, 2017 at 16:05
The compiler is not showing any errors. I had tried it with number and it had no effect. So a little confused. — Eden WebStudio
– Eden WebStudio, Commented Dec 2, 2017 at 16:08
Post a complete minimal example reproducing the problem, in a plunkr. — JB Nizet
– JB Nizet, Commented Dec 2, 2017 at 16:09

Sajeetharan · Accepted Answer · 2017-12-02 16:18:13Z

2

Your variable selectedStatus should not be a array of strings, it should be a number, change it as.

selectedStatus:  number ;

WORKING STACKBLITZ

answered Dec 2, 2017 at 16:18

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Erik Ostermueller Over a year ago

stackblitz link is dead :-(

Marian07 Over a year ago

In Angular Material 7, formControlName becomes -> name (@Input() name: string). material.angular.io/components/radio/api "Name of the radio button group. All radio buttons inside this group will use this name."

Collectives™ on Stack Overflow

Using NgModel to bind to radio group input for Angular Material

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related