How can I change values on radio-buttons? ANGULAR MATERIAL RADIO BUTTON

Viewed 13

I have to make some radio buttons in a filter sidenav and after call a function which will show if that filters are active or not and I try to use [(ngModel)] but i get this error:

ERROR Error: No value accessor for form control with unspecified name attribute

The html code is this

 <mat-radio-group>
      <div>
        <mat-radio-button class="radio-group" value="all" color="warn" *ngIf="isClickedCategory && isExpended">All
        </mat-radio-button>
      </div>

      <div>
        <mat-radio-button class="radio-group" value="electronics" color="warn"
                           *ngIf="isClickedCategory && isExpended" >Electronics
        </mat-radio-button>
      </div>

      <div>
        <mat-radio-button class="radio-group" value="accessories" color="warn" *ngIf="isClickedCategory && isExpended">Accesories
        </mat-radio-button>
      </div>

      <div>
        <mat-radio-button class="radio-group" value="office" color="warn"  *ngIf="isClickedCategory && isExpended">Office
        </mat-radio-button>
      </div>
      <br/>
    </mat-radio-group>`

The Typescript values:

all:boolean=false; office:boolean=false; electronics:boolean=false; accesories:boolean=false;

And the function which verify if filters are active

 filtersActive(): boolean {
let ok: boolean;
if (
  (!this.all)&&
  (!this.electronics) &&
  (!this.accesories) &&
  (!this.office) ) {
  ok = false;
} else ok = true;
return ok;

}

I call this function when the button which collapse the sidenav is pressed

How can I make that values change in TS file?

Thanks for answers!

1 Answers

Have you import FormsModule in your component module ?

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  ...
  imports:      [ BrowserModule, FormsModule ], //< added FormsModule here
})

export class AppModule { }
Related