Why are all the mat radio buttons selected when I open a mat dialog?

Question

I've been playing around with forms in mat dialogs. I'm trying to get the mat-radio-group to work as it's supposed to when a dialog opens. They're either all selected or none are.

So the below way produces all values selected when modal opens

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <mat-radio-group>
    <mat-radio-button>Hello</mat-radio-button>
    <mat-radio-button>World</mat-radio-button>
    <mat-radio-button>Hello</mat-radio-button>
  </mat-radio-group>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

This one causes none to be selected when opening dialog but then I can't select any

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <mat-form-field>
    <mat-radio-group>
      <mat-radio-button>Hello</mat-radio-button>
      <mat-radio-button>World</mat-radio-button>
      <mat-radio-button>Hello</mat-radio-button>
    </mat-radio-group>
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

The current project I'm working on has the below and none are selected on open dialog, I can select, but when I select another button the other selected buttons stay selected and I can't deselect them :/

<div mat-dialog-content>
  <form cdkFocusRegionstart [formGroup]='form' novalidate>

    <div *ngIf='type === "Done"' fxLayout='column'>
      <mat-form-field *ngIf='done.isAdmin' class='search' floatLabel='never'>
        <span matPrefix class='search-icon'>
          <img src='assets/ic_search.svg' />
        </span>
        <input 
          type='text'  
          aria-label='Admins'
          placeholder='Admins'
          matInput
          [formControl]='searchControl'
          [matAutocomplete]='auto'>

        <mat-autocomplete #auto='matAutocomplete' [displayWith]='displayName'>
          <mat-option *ngFor='let admins of filteredAdmins | async' [value]='admin'>
            {{ admin.firstName }} {{ admin.lastName}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>

      <div fxLayout='row' fxLayoutAlign='space-between' fxFlex='100'>

        <div fxFlex='45' class='user-input'>
          <div class='field-border'>
            <label>Cars <span class='red'>*</span></label>
            <div class='radio'>
              <div *ngFor='let car of companyCars'>
                <mat-radio-group formControlName='car'>
                  <mat-radio-button [value]='car'>
                    {{ car.car }}
                  </mat-radio-button>
                </mat-radio-group>
              </div>
            </div>
          </div>
        </div>

        <div fxLayout='column' fxLayoutGap='8px' fxFlex='45'>

          <div class='field-border' fxFlex='100'>
            <label>VIN</label>
            <input formControlName='vin' type='text'>
          </div>

          <!-- comments -->
          <div class='field-border' fxFlex='100'>
            <label>Comments</label>
            <textarea formControlName='comments'></textarea>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

As a note, cdkFocusRegionStart was put in there to stop the autocomplete from automatically popping open the list of admins when the dialog opens.

Here's a stackblitz with the first problem

Answer 1

In fact, in your project code, there is a "typo", remark car instead of cars (also in html, it should be double quoted - just a formating advice) :

    <div fxFlex='45' class='user-input'>
              <div class='field-border'>
                <label>Cars <span class='red'>*</span></label>
                <div class='radio'>

                    <mat-radio-group formControlName='car'>
<ng-container *ngFor='let cars of companyCars'>
                      <mat-radio-button [value]='cars'>
                        {{ car.car }}
                      </mat-radio-button>
</ng-container>
                    </mat-radio-group>

                </div>
              </div>
            </div>

As to your stackblitz, just add value to the radio form

Edit: there was also some issues in the loop if you don't want to use ng-container, try just :

<mat-radio-group formControlName='car'>

                          <mat-radio-button *ngFor='let cars of companyCars' [value]='cars'>
                            {{ car.car }}
                          </mat-radio-button>
                        </mat-radio-group>

Answer 2

Just add values to each radio button, it will make them usable.

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <mat-radio-group>
    <mat-radio-button value="Hello">Hello</mat-radio-button>
    <mat-radio-button value="World">World</mat-radio-button>
    <mat-radio-button value="Hello">Hello</mat-radio-button>
  </mat-radio-group>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal">Ok</button>
</div>

A screenshot: