Angular 带有 Material Table 的反应式表单显示奇怪的单选按钮
Weird radio buttons display for Angular Reactive Forms with Material Table
我在 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
删除 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>
我在 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
删除 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>