Как получить значения города и штата из ответа http-вызова на событие ввода пин-кода в угловых 6 - PullRequest
0 голосов
/ 22 марта 2019

Работая над заполнением значений города и штата путем ввода пин-кода, я написал этот код, который работает время от времени, и не всегда. Проблема: каждый раз, когда я вписываю номер, вызывается служба http, поэтому, пока я не введу все 6-значное число, он будет вызываться http 6 раз, а для самой 5-й цифры он заполняет значение штата и города. Также выдает ошибку, сообщающую, что возвращенный ответ не определен, хотя поля заполнены

component.ts

 ngOnInit(): void {

        this.policyService.getPolicyInfo().subscribe(response => {
                    this.vehicleDetailsForm.patchValue( {'field':null} )
              })
}
onSubmitPin() {
        let formValuePin: any = {
            pincode: this.proposalDetailsForm.value.p_pin,


        }
        console.log(this.proposalDetailsForm.value.p_pin)
        this.policyService.getPinCode(formValuePin)
            .pipe()
            .subscribe(vehpin => {
                this.displayVehPin(vehpin),
                    console.log('vehpin: ', vehpin); //
                (error: any) => this.errorMessage = <any>error
            }
            )
    }

    displayVehPin(vehpin): void {
        this.vehidv = vehpin;
        console.log('vehpin: ', vehpin); //
        if (this.proposalDetailsForm) {
            console.log("you almost der...")
        }
        // the data on the form
        this.proposalDetailsForm.patchValue({
            p_state: vehpin.data.state_name,
            p_city: vehpin.data.city_name,

        });
        console.log(vehpin)
    }

HTML код

<div class="col-lg-4 m-form__group-sub">
                                            <mat-form-field class="example-full-width" appearance="outline">
                                                <mat-label>Pin Code</mat-label>
                     <input matInput placeholder="" formControlName="p_pin" (onChanges)="onSubmitPin()">

</mat-form-field>
                                            <label *ngIf="proposalDetailsForm.get('p_pin').errors?.required"  class="invalid-feedback">
            This Field is required.
            </label>
                        <label *ngIf="proposalDetailsForm.controls.p_pin.errors?.pattern"  class="invalid-feedback">
                                                        Should be a valid 6 digit number.
                                                    </label>
                                        </div>
...