close
html
<form [formGroup]="gridForm">
<div formArrayName="data">
<div *ngFor="let row of gridForms.controls; let i=index" [formGroupName]="i">
<input formControlName="KEY_NO">
<input formControlName="USER">
<input formControlName="AREA">
<button (click)="row(phone)">check</button>
{{row.value.KEY_NO}}
</div>
</div>
<button (click)="addData()">Add Data</button>
<button (click)="check()">check</button>
</form>
ts
export class Dd00005Component implements OnInit {
dataSource = new MatTableDataSource<GridModel>();
displayedColumns = ['ACTION', 'KEY_NO', 'USER', 'AREA'];
myForm: FormGroup;
gridForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.dataSource = new MatTableDataSource<GridModel>(formData);
this.gridForm = this.fb.group({
data: this.fb.array([])
});
formData.forEach(x => {
const data = this.fb.group({
KEY_NO: [x.KEY_NO],
USER: [x.USER],
AREA: [x.AREA],
});
this.gridForms.push(data);
});
console.log(this.gridForm.get('data').value);
}
get gridForms() {
return this.gridForm.get('data') as FormArray;
}
addData() {
const data = this.fb.group({
KEY_NO: [],
USER: [],
AREA: [],
});
this.gridForms.push(data);
}
deletePhone(i) {
this.gridForms.removeAt(i);
}
}
export interface GridModel {
KEY_NO: number;
USER: string;
AREA: string;
}
const formData: GridModel[] = [
{ KEY_NO: 1, USER: 'Hydrogen', AREA: 'H' },
{ KEY_NO: 2, USER: 'Helium', AREA: 'He' },
{ KEY_NO: 3, USER: 'Lithium', AREA: 'Li' },
{ KEY_NO: 4, USER: 'Beryllium', AREA: 'Be' },
{ KEY_NO: 5, USER: 'Boron', AREA: 'B' },
{ KEY_NO: 6, USER: 'Carbon', AREA: 'C' },
{ KEY_NO: 7, USER: 'Nitrogen', AREA: 'N' },
{ KEY_NO: 8, USER: 'Oxygen', AREA: 'O' },
{ KEY_NO: 9, USER: 'Fluorine', AREA: 'F' },
{ KEY_NO: 10, USER: 'Neon', AREA: 'Ne' },
];
全站熱搜
留言列表