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

实际上，在您的项目代码中，有一个“ typo”，记为 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>

屏幕截图：

为什么打开席子对话框时所有席子单选按钮都被选中？

2 个答案: