import { Component , Input , ElementRef , EventEmitter , OnChanges , Output , ViewChild , SimpleChanges , ChangeDetectionStrategy } from '@angular/core' ; import { Villain } from '../../core' ; import { FormBuilder , Validators , FormGroup } from '@angular/forms' ; @ Component ( { selector : 'aw-villain-detail' , templateUrl : './villain-detail.component.html' , styleUrls : [ './villain-detail.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush } ) export class VillainDetailComponent implements OnChanges { @ Input ( ) villain : Villain ; @ Output ( ) unselect = new EventEmitter < string > ( ) ; @ Output ( ) add = new EventEmitter < Villain > ( ) ; @ Output ( ) update = new EventEmitter < Villain > ( ) ; @ ViewChild ( 'name' ) nameElement : ElementRef ; addMode = false ; form = this . fb . group ( { id : [ ] , name : [ '' , Validators . required ] , saying : [ '' ] } ) ; constructor ( private fb ) { } ngOnChanges ( changes ) { this . setFocus ( ) ; if ( this . villain && this . villain . id ) { this . addMode = false ; this . form . patchValue ( this . villain ) ; } else { this . form . reset ( ) ; this . addMode = true ; } } addVillain ( form ) { const { value , valid , touched } = form ; if ( touched && valid ) { this . add . emit ( { ... this . villain , ... value } ) ; } this . clear ( ) ; } clear ( ) { this . unselect . emit ( ) ; } saveVillain ( form ) { if ( this . addMode ) { this . addVillain ( form ) ; } else { this . updateVillain ( form ) ; } } setFocus ( ) { this . nameElement . nativeElement . focus ( ) ; } updateVillain ( form ) { const { value , valid , touched } = form ; if ( touched && valid ) { this . update . emit ( { ... this . villain , ... value } ) ; } this . clear ( ) ; } }