CODEWITHSUNDEEP
angular
tdsjohn
tdsjohn

Reputation: 23

unable to bind data with ngForm on radiobuttons

Can someone please help, I am trying to bind data to the radiobuttons but nothing seems to be output to the questionnaire.value?!

<form #questionnaire="ngForm">
   {{questionnaire.value | json}}    
   <div>
      <label>Float label: </label>
      <mat-radio-group ngModel name="answer1" formControlName="floatLabel">
         <mat-radio-button name="answer1" ngModel value="this">This</mat-radio-button>
         <mat-radio-button name="answer1" ngModel value="that">That</mat-radio-button>
         <mat-radio-button name="answer1" ngModel value="other">Other</mat-radio-button>
      </mat-radio-group>
   </div>
</form>

Upvotes: 0

Views: 52

Answers (2)

Gangadhar Gandi
Gangadhar Gandi

Reputation: 2252

Modify your code like below,

<form #questionnaire="ngForm">
   {{ selectedRadioValue }}  
   <div>
      <label>Float label: </label>
      <mat-radio-group [(ngModel)]="selectedRadioValue" name="answer1" formControlName="floatLabel">
      <mat-radio-button name="answer1" value="this">This</mat-radio-button>
      <mat-radio-button name="answer1" value="that">That</mat-radio-button>
      <mat-radio-button name="answer1" value="other">Other</mat-radio-button>
      </mat-radio-group>
   </div>
</form>

Upvotes: 0

Adrita Sharma
Adrita Sharma

Reputation: 22203

Try like this:

<mat-radio-group [(ngModel)]="answer1" #radioGroup="matRadioGroup">
  <mat-radio-button name="answer1" value="this">this</mat-radio-button>
  <mat-radio-button name="answer1" value="that">That</mat-radio-button>
  <mat-radio-button name="answer1" value="other">Other</mat-radio-button>
</mat-radio-group>

Working Demo

Upvotes: 1

Related Questions