import { Component, OnInit } from '@angular/core';
|
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
|
|
@Component({
|
selector: 'app-advanced-form',
|
templateUrl: './advanced-form.component.html'
|
})
|
export class AdvancedFormComponent implements OnInit {
|
editIndex = -1;
|
editObj = {};
|
|
form: FormGroup;
|
users: any[] = [
|
{ value: 'xiao', label: '付晓晓' },
|
{ value: 'mao', label: '周毛毛' }
|
];
|
|
constructor(private fb: FormBuilder) {}
|
|
ngOnInit() {
|
this.form = this.fb.group({
|
name: [null, [Validators.required]],
|
url: [null, [Validators.required]],
|
owner: [undefined, [Validators.required]],
|
approver : [null, [Validators.required]],
|
time_start : [null, [Validators.required]],
|
time_end : [null, [Validators.required]],
|
type : [null, [Validators.required]],
|
name2 : [null, [Validators.required]],
|
summary : [null, [Validators.required]],
|
owner2 : [null, [Validators.required]],
|
approver2 : [null, [Validators.required]],
|
time : [null, [Validators.required]],
|
type2 : [null, [Validators.required]],
|
items: this.fb.array([])
|
});
|
const userList = [
|
{
|
key: '1',
|
workId: '00001',
|
name: 'John Brown',
|
department: 'New York No. 1 Lake Park',
|
}, {
|
key: '2',
|
workId: '00002',
|
name: 'Jim Green',
|
department: 'London No. 1 Lake Park',
|
}, {
|
key: '3',
|
workId: '00003',
|
name: 'Joe Black',
|
department: 'Sidney No. 1 Lake Park',
|
}
|
];
|
userList.forEach(i => {
|
const field = this.createUser();
|
field.patchValue(i);
|
this.items.push(field);
|
});
|
}
|
|
createUser(): FormGroup {
|
return this.fb.group({
|
key: [ null ],
|
workId: [ null, [ Validators.required ] ],
|
name: [ null, [ Validators.required ] ],
|
department: [ null, [ Validators.required ] ]
|
});
|
}
|
|
//#region get form fields
|
get name() { return this.form.controls.name; }
|
get url() { return this.form.controls.url; }
|
get owner() { return this.form.controls.owner; }
|
get approver() { return this.form.controls.approver; }
|
get time_start() { return this.form.controls.time_start; }
|
get time_end() { return this.form.controls.time_end; }
|
get type() { return this.form.controls.type; }
|
get name2() { return this.form.controls.name2; }
|
get summary() { return this.form.controls.summary; }
|
get owner2() { return this.form.controls.owner2; }
|
get approver2() { return this.form.controls.approver2; }
|
get time() { return this.form.controls.time; }
|
get type2() { return this.form.controls.type2; }
|
get items() { return this.form.controls.items as FormArray; }
|
//#endregion
|
|
add() {
|
this.items.push(this.createUser());
|
this.edit(this.items.length - 1);
|
}
|
|
del(index: number) {
|
this.items.removeAt(index);
|
}
|
|
edit(index: number) {
|
if (this.editIndex !== -1 && this.editObj) {
|
this.items.at(this.editIndex).patchValue(this.editObj);
|
}
|
this.editObj = { ...this.items.at(index).value };
|
this.editIndex = index;
|
}
|
|
save(index: number) {
|
this.items.at(index).markAsDirty();
|
if (this.items.at(index).invalid) return ;
|
this.editIndex = -1;
|
}
|
|
cancel(index: number) {
|
if (!this.items.at(index).value.key) {
|
this.del(index);
|
} else {
|
this.items.at(index).patchValue(this.editObj);
|
}
|
this.editIndex = -1;
|
}
|
|
_submitForm() {
|
console.log(this.form.value);
|
for (const i in this.form.controls) {
|
this.form.controls[ i ].markAsDirty();
|
}
|
if (this.form.invalid) return ;
|
}
|
}
|
