Angular 2 Reactive form + directive validation

Question

I'm trying to wrap my head around the following problem:

I have a 'google-place-autocomplete' directive that adds the autocomplete functionality to an input field.

Now I also wanted it to be able to force a google place selection and only be 'valid' if the user has selected a place.

E.g:

@Directive({
    selector: '[googlePlace][formControlName], [googlePlace][ngModel]',
    providers: [{provide: NG_VALIDATORS, useExisting: GooglePlaceDirective, multi: true}]
})
export class GooglePlaceDirective implements Validator, OnChanges {

    valid = false;
    @Output() googlePlaceAddressChange: any = new EventEmitter();
    @Input() googlePlaceAddress: any;

    @Output() ngModelChange: any = new EventEmitter();

    private autocomplete: any;
    constructor(private googleMapService: GoogleMapsService,
                private element: ElementRef,
                private zone: NgZone) {
    }

    ngOnInit() {
        let self = this;
        this.googleMapService
            .load()
            .subscribe(
                () => {
                    this.autocomplete = new google.maps.places.Autocomplete(this.element.nativeElement);
                    this.autocomplete.addListener('place_changed', function () {
                        self.placeChanged(this.getPlace());
                    });
                }
            );
    }

    private placeChanged(place) {
        this.zone.run(() => {
            this.googlePlaceAddress = {
                address: this.element.nativeElement.value,
                formattedAddress: place.formatted_address,
                latitude: place.geometry.location.lat(),
                longitude: place.geometry.location.lng()
            };
            this.valid = true;
            this.googlePlaceAddressChange.emit(this.googlePlaceAddress);
            this.ngModelChange.emit(this.element.nativeElement.value);
        });
    }

    ngOnChanges(changes): void {
        let googlePlaceDefined = typeof (changes.googlePlaceAddress) !== 'undefined';
        let modelDefined = typeof (changes.ngModel) !== 'undefined';

        if(modelDefined && !googlePlaceDefined) {
            this.valid = false;
        } else if(googlePlaceDefined && !modelDefined) {
            this.valid = true;
        }
    }

    validate(control: AbstractControl) {
        return this.valid === false ? {'googlePlaceAddress': true} : null;
    }
}

If I use this directive in an template driven form:

...
<input name="addr" type="text" [(ngModel)]="textValue" [(googlePlaceAddress)]="googleAddress" required>
<p *ngIf="addr.errors.googlePlaceAddress">Please select a proposed address</p>
...

it works fine.

Now I need to use this in an Reactive Form using FormGroup

let groups = [
    new FormControl('', [Validators.required])
];

/** HTML **/
...
<input [id]="addr"
    [formControlName]="address"
    class="form-control"
    type="text"
    googlePlace
    [placeholder]="question.label"
    [(googlePlaceAddress)]="googleAddress">
...

However in this case the validation from the directive is never triggered.

I suppose angular2 expects it to be given through, when using Reactive Forms:

new FormControl('', [Validators.required, ???])

I must have taken a wrong path somewhere.

RVandersteen RVandersteen · Accepted Answer · 2016-11-28T17:19:49

For future reference:

I solved my problem creating a component out of it together with a Value accessor:

@Component({
    selector: 'app-google-place',
    templateUrl: './google-place.component.html',
    styleUrls: ['./google-place.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => GooglePlaceComponent),
            multi: true
        }
    ]
})
export class GooglePlaceComponent implements OnInit, ControlValueAccessor {
    @ViewChild('inputElement') inputElement: ElementRef;

    @Input() public placeholder: string = "Address";
    @Input() public textValue: string = "";

    private autocomplete: any;
    private _place = null;

    constructor(
        private googleMapService: GoogleMapsService,
        private zone: NgZone
    ) {
    }

    ngOnInit() {
        this.googleMapService
            .load()
            .subscribe(
                () => {
                    this.autocomplete = new google.maps.places.Autocomplete(this.inputElement.nativeElement);
                    this.autocomplete.addListener('place_changed', () => this.placeChanged());
                }
            );
    }

    placeChanged() {
        this.zone.run(() => {
            let place = this.autocomplete.getPlace();
            this._place = {
                address: this.inputElement.nativeElement.value,
                formattedAddress: place.formatted_address,
                latitude: place.geometry.location.lat(),
                longitude: place.geometry.location.lng()
            };

            this.propagateChange(this._place);
        });
    }

    onNgModelChange($event) {

        if(this._place !== null) {
            if(this._place.address !== $event) {
                this._place = null;
                this.propagateChange(this._place);
            }
        }
    }

    onBlur() {
        this.propagateTouched();
    }

    writeValue(obj: any): void {
        if(obj !== undefined) {
            this._place = obj;
        }
    }

    propagateChange = (_: any) => {};
    registerOnChange(fn) {
        this.propagateChange = fn;
    }

    propagateTouched = () => {};
    registerOnTouched(fn: any): void {
        this.propagateTouched = fn;
    }
}

Using this I can use it in a FormGroup with the Validators.required and it will only be valid if a user has selected a google place.

EDIT

The html:

<input type="text"
   (blur)="onBlur()"
   #inputElement
   class="form-control"
   [(ngModel)]="textValue"
   (ngModelChange)="onNgModelChange($event)">

The service:

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class GoogleMapsService {

    private key = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';

    private loaded = false;
    private currentRequest = null;

    constructor() {
    }

    load() {
        if (this.loaded) {
            return Observable.create((observer) => {
                observer.next();
                observer.complete();
            });
        }

        if (this.currentRequest === null) {
            //http://reactivex.io/rxjs/manual/overview.html#multicasted-observables
            const source = Observable.create((observer) => {
                this.loadMaps(observer);
            });

            const subject = new Subject();
            this.currentRequest = source.multicast(subject);
            this.currentRequest.connect();
        }

        return this.currentRequest;
    }

    private loadMaps(observer: any) {
        const script: any = document.createElement('script');
        script.src = 'https://maps.googleapis.com/maps/api/js?key=' + this.key + '&libraries=places';

        if (script.readyState) { // IE, incl. IE9
            script.onreadystatechange = () => {
                if (script.readyState == 'loaded' || script.readyState == 'complete') {
                    script.onreadystatechange = null;
                    this.loaded = true;
                    observer.next();
                    observer.complete();
                    this.currentRequest = null;
                }
            };
        } else {
            script.onload = () => { // Other browsers
                this.loaded = true;
                observer.next();
                observer.complete();
                this.currentRequest = null;
            };
        }

        script.onerror = () => {
            observer.error('Unable to load');
            this.currentRequest = null;
        };

        document.getElementsByTagName('head')[0].appendChild(script);
    }
}

The 'usage':

With template ngModel

<app-google-place ([ngModel)]="place"></app-google-place>

Angular 2 Reactive form + directive validation

1 Answers