Question

我使用表单构建器构建表单：

public searchMapForm = this.formBuilder.group({
    country: ["DE"],
    postcode: ["13347", this.searchCont],
    this: [this]
});

邮政编码的自定义验证器如下所示：

private searchCont( c ) {

    if( !c || !c.value || c.value.length < 4 ) return { toShort: { valid: false } };

    var __this = c._parent && c._parent.controls.this.value; // this look too complicated

    if( __this && __this.http ) {
        __this.http.get('http://nominatim.openstreetmap.org/search?format=json&addressdetails=1&limit=5&postalcode=' + c.value + '&countrycodes=' + c._parent.controls.country.value ).subscribe(res => {
            let l = res.json()[0];

            if( l ) {
                __this.map.setView( [l.lat, l.lon], 13, { animate: true } )
                __this.markers.map( m => { m.remove(); } )
                __this.markers = [];
                __this.markers.push( L.marker( [l.lat, l.lon] ).addTo( __this.map ) );
            }
        });
    }

    return null;
}

每次更改后都会调用回调，但this未定义。所以我必须找到一种方法来访问它。一切正常，但看起来并不好。在这种情况下最好的做法是什么？

Answer 1

我会将http请求调用放在表单valueChanges事件中。

searchMapForm.valueChanges.subscribe(e=>{
if(this.searchMapForm.controls['postcode'].valid && !this.searchMapForm.controls['postcode'].pristine){
this.http.get('http://nominatim.openstreetmap.org/search?format=json&addressdetails=1&limit=5&postalcode=' + e.postcode + '&countrycodes=' + e.country ).subscribe(res => {
            let l = res.json()[0];

            if( l ) {
                this.map.setView( [l.lat, l.lon], 13, { animate: true } )
                this.markers.map( m => { m.remove(); } )
                this.markers = [];
                this.markers.push( L.marker( [l.lat, l.lon] ).addTo( this.map ) );
            }
        });
}
});

或者您可以考虑创建一个单独的指令，如教程here

如何在formbuilder验证器回调

1 个答案: