我有一个FormArray,下面有一个列表项。我想创建一个按钮来删除ArrayForm下的项目。当我单击按钮时,它将清除表单值,但不会从前端删除该项目。不知道我在哪里失踪。
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 ],
})
}
deleteRow(index) {
console.log('Delete row...');
(<FormArray>this.testForm.controls.radioButtons).removeAt(index);
}
onSubmit() {
console.log(this.testForm);
}
}
app.component.html
<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-{{i}}" 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>
<button type="button" (click)="deleteRow(i)">Delelet Row</button>
</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>
您可以在此处找到演示:https://stackblitz.com/edit/angular2-reactive-form-table
答案 0 :(得分:1)
首先需要使用
implicit_plot3d
获取Mat Table
的实例,然后使用ViewChild
删除后呈现更新的行:已更新您的Stackblitz: Updated Stackblitz Demo
this.matTable.renderRows()