Question

我在材料表上有三行单选按钮。但是，它仅显示一个已选中的所有选项。虽然我可以修改单选按钮的数据。

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反应形式显示奇怪的单选按钮

1 个答案: