Question

我试图解决以下问题：

我有一个＆＃39; google-place-autocomplete＆＃39;将自动完成功能添加到输入字段的指令。

现在我还希望它能够强制选择谷歌地方，并且只能“有效”。如果用户选择了一个地方。

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;
    }
}

如果我以模板驱动的形式使用此指令：

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

它工作正常。

现在我需要在使用FormGroup的反应表单中使用它

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

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

但是在这种情况下，指令的验证永远不会被触发。

我认为angular2希望在使用Reactive Forms时提供它：

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

我必须在某处走错路。

Answer 1

供将来参考：

我解决了使用Value访问器创建组件的问题：

@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;
    }
}

使用此功能，我可以在带有Validators.required的FormGroup中使用它，只有在用户选择了Google地方时才有效。

修改

html：

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

服务：

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); } }

＆＃39;用法＆＃39;：

使用模板ngModel

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

Angular 2反应形式+指令验证

1 个答案: