Значение MatRadioGroup не определено

Question

У меня проблемы с доступом к значению переключателей. Это мой код:

      <mat-radio-group #rangeInput>
        <mat-radio-button name="range" value="3">3</mat-radio-button>
        <mat-radio-button name="range" value="5">5</mat-radio-button>
        <mat-radio-button name="range" value="7" [checked]="true">7</mat-radio-button>
        <mat-radio-button name="range" value="9">9</mat-radio-button>
      </mat-radio-group>
      <button mat-raised-button [matDialogClose] (click)="onInput(rangeInput.value)">Ok</button>

Кажется, что элемент-ссылка на mat-radio-group не имеет свойства value ?! Что я делаю не так?

Привет Фонзане

Answer 1

Использование ngModel в радиогруппе

<mat-radio-group [(ngModel)]="rangeValue">
        <mat-radio-button name="range" [value]="3">3</mat-radio-button>
        <mat-radio-button name="range" [value]="5">5</mat-radio-button>
        <mat-radio-button name="range" [value]="7" [checked]="true">7</mat-radio-button>
        <mat-radio-button name="range" value="9">9</mat-radio-button>
</mat-radio-group>
<button mat-raised-button [matDialogClose] (click)="onInput()">Ok</button>

TS:

rangeValue:any;

onInput(){
  //use this.rangeValue here...
}

Answer 2

Надеюсь, это поможет ...

app.component.ts

 onDataChange(event) {
  console.log(event.value);    
 }

app.component. html

<mat-radio-group aria-label="Select an option" (change)="onDataChange($event)">
<mat-radio-button name="range" value="3">3</mat-radio-button>
<mat-radio-button name="range" value="5">5</mat-radio-button>
<mat-radio-button name="range" value="7" [checked]="true">7</mat-radio-button>
<mat-radio-button name="range" value="9">9</mat-radio-button>