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 ) { } 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 ( ) { return this . fb . group ( { key : [ null ] , workId : [ null , [ Validators . required ] ] , name : [ null , [ Validators . required ] ] , department : [ null , [ Validators . required ] ] } ) ; } 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 ; } add ( ) { this . items . push ( this . createUser ( ) ) ; this . edit ( this . items . length - 1 ) ; } del ( index ) { this . items . removeAt ( index ) ; } edit ( index ) { 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 ) { this . items . at ( index ) . markAsDirty ( ) ; if ( this . items . at ( index ) . invalid ) return ; this . editIndex = - 1 ; } cancel ( index ) { 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 ; } }