<mat-radio-button> : No value accessor

Question

I have this HTML:

 <mat-radio-group>
  <mat-radio-button  [(ngModel)]="searchType">
      And (Narrower search)
  </mat-radio-button>
  <mat-radio-button  [(ngModel)]="searchType">
       Or (Wider search)
  </mat-radio-button>
 </mat-radio-group>

I am getting this error:

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

I tried using this instead:

 <mat-radio-button name="search-and"[(ngModel)]="searchType">
      And (Narrower search)
 </mat-radio-button>

and I get this error:

Error: No value accessor for form control with name: 'search-and'

so then I tried this:

 <mat-radio-button value="search-and" name="search-and" [(ngModel)]="searchType">
              And (Narrower search)
 </mat-radio-button>

and this:

  <mat-radio-button [value]="search-and" name="search-and" [(ngModel)]="searchType">
              And (Narrower search)
  </mat-radio-button>

and I still get this error:

Error: No value accessor for form control with name: 'search-and'

Answer 1

Try to set formControlName="SearchType" on <mat-radio-group> and not on <mat-radio-button>.

Answer 2

Ugghh my bad, ngModel belongs at the parent level:

  <mat-radio-group fxLayout="column" [(ngModel)]="searchType" (change)="onSearchTypeChange()">
     <mat-radio-button value="search-and" name="search-and">
          And (Narrower search)
     </mat-radio-button>
     <mat-radio-button  value="search-or" name="search-or">
         Or (Wider search)
    </mat-radio-button>
  </mat-radio-group>

Now everything works, no errors, not sure whether to use [value] or value though.