import { Component , Input , OnDestroy , OnInit } from '@angular/core' ; import { AbstractControl , ControlValueAccessor , FormBuilder , FormGroup , NG_VALIDATORS , NG_VALUE_ACCESSOR , Validator , Validators } from '@angular/forms' ; import { noop , Subscription } from 'rxjs' ; @ Component ( { selector : 'address-form' , templateUrl : './address-form.component.html' , styleUrls : [ './address-form.component.scss' ] , providers : [ { provide : NG_VALUE_ACCESSOR , multi : true , useExisting : AddressFormComponent } ] } ) export class AddressFormComponent implements ControlValueAccessor , OnDestroy { @ Input ( ) legend : string ; onTouched = ( ) => { } ; onChangeSub : Subscription ; form : FormGroup = this . fb . group ( { addressLine1 : [ null , [ Validators . required ] ] , addressLine2 : [ null , [ Validators . required ] ] , zipCode : [ null , [ Validators . required ] ] , city : [ null , [ Validators . required ] ] } ) ; constructor ( private fb ) { } registerOnChange ( onChange ) { this . onChangeSub = this . form . valueChanges . subscribe ( onChange ) ; } ngOnDestroy ( ) { this . onChangeSub . unsubscribe ( ) ; } writeValue ( value ) { if ( value ) { this . form . setValue ( value ) ; } } registerOnTouched ( onTouched ) { this . onTouched = onTouched ; } setDisabledState ( disabled ) { if ( disabled ) { this . form . disable ( ) ; } else { this . form . enable ( ) ; } } }