为什么打开垫子对话框时选择了所有垫子单选按钮？

Question

我一直在使用 mat 对话框中的表单。我试图让 mat-radio-group 在对话框打开时按预期工作。它们要么全部被选中，要么没有。

所以下面的方式会在模态打开时产生所有选择的值

<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>

这会导致在打开对话框时没有选择任何内容，但是我无法选择任何内容

<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>

我正在处理的当前项目具有以下内容，并且在打开的对话框中没有选择，我可以选择，但是当我选择另一个按钮时，其他选定的按钮保持选中状态并且我无法取消选择它们：/

<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>

请注意，将 cdkFocusRegionStart 放在那里是为了阻止自动完成在对话框打开时自动弹出管理员列表。

Here's a stackblitz with the first problem

Answer 1

实际上，在你的项目代码中，有一个“错字”，备注 car 而不是 cars （同样在 html 中，它应该是双引号 - 只是一个格式建议）：

    <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>

至于您的stackblitz，只需为广播表单添加价值

编辑：循环中也存在一些问题 如果您不想使用 ng-container，请尝试：

<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

只需为每个单选按钮添加值，它就会使它们可用。

<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>

截图：