Angular 带有 Material Table 的反应式表单显示奇怪的单选按钮

Question

我在 Material Table 上有三行单选按钮。但是，它只显示一个检查所有这些。虽然我可以修改单选按钮的数据。

app.component.html

<h1>{{ name }}</h1>
<form name="testForm" [formGroup]="testForm" (ngSubmit)="onSubmit()" novalidate>
  <div formArrayName="radioButtons">
    <table mat-table [dataSource]="testForm.controls['radioButtons'].controls">        
      <ng-container matColumnDef="radioButtons">
        <th mat-header-cell *matHeaderCellDef class="radio">Radio Buttons</th>
        <td mat-cell *matCellDef="let element; let i = index;" [formGroupName]="i" class="radio">            
          <mat-radio-group name="radio" formControlName="radio" required disableOptionCentering>
            <mat-radio-button value="Y">Yes</mat-radio-button>
            <mat-radio-button value="N">No</mat-radio-button>
          </mat-radio-group>            
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="classGridDisplayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: classGridDisplayedColumns;"></tr>
    </table>
  </div>
  <pre>{{ testForm.value | json }}</pre>
</form>

app.component.ts

export class AppComponent  {
  name = 'Angular2+ Reactive Form';
  testForm: FormGroup;
  classGridDisplayedColumns = [
    "radioButtons"
  ];
  data = {
    radioButtons: [
      {radio: 'Y'},
      {radio: 'N'},
      {radio: 'N'}
    ]
  };
  constructor(private readonly fb: FormBuilder){
    this.testForm = this.fb.group({
      radioButtons: this.fb.array(
        this.data.radioButtons.map(radioButton => this.generateRadioButtons(radioButton))
      )
    });
  }

  private generateRadioButtons(radioButton) {
    return this.fb.group({
      radio: [ radioButton.radio, Validators.required ],      
    })
  }
}

您可以在这里查看代码：https://stackblitz.com/edit/angular2-reactive-form-table

Answer 1

删除 name 属性。或者您可以使用动态名称，例如 name="radio{{i}}".

<h1>{{ name }}</h1>
<form name="testForm" [formGroup]="testForm" (ngSubmit)="onSubmit()" novalidate>
  <div formArrayName="radioButtons">
    <table mat-table [dataSource]="testForm.controls['radioButtons'].controls">        
      <ng-container matColumnDef="radioButtons">
        <th mat-header-cell *matHeaderCellDef class="radio">Radio Buttons</th>
        <td mat-cell *matCellDef="let element; let i = index;" [formGroupName]="i" class="radio">            
          <mat-radio-group formControlName="radio" required disableOptionCentering>
            <mat-radio-button value="Y">Yes</mat-radio-button>
            <mat-radio-button value="N">No</mat-radio-button>
          </mat-radio-group>            
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="classGridDisplayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: classGridDisplayedColumns;"></tr>
    </table>
  </div>
  <pre>{{ testForm.value | json }}</pre>
</form>

Angular 带有 Material Table 的反应式表单显示奇怪的单选按钮

Weird radio buttons display for Angular Reactive Forms with Material Table

angular

angular-material

angular-reactive-forms

angular8

angular-material-table