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' },
];
arrow
arrow
    全站熱搜
    創作者介紹

    Chill_Radio 發表在 痞客邦 留言(0) 人氣()