首次提交时asyncValidator

Question

我正在使用asyncValidator来验证电话号码尚未在数据库中注册。

但是，当用户按下“提交”按钮时，即使电话号码有效，它也会进行检查并不会提交表格。

第二次提交后，它就会提交表单。

是什么原因造成的？

我该如何解决它才能在第一次提交？

这是我的page-register-user.html代码：

<form [formGroup]="userRegisterForm" (ngSubmit)="userRegisterFormSubmit()">                  
  <ion-input type="hidden" formControlName="user_type_id" [(ngModel)]="user_type_id_data"></ion-input>
  <div class="my-row">
    <ion-item [class.invalid]="!full_name.valid && submitAttempt">
      <ion-label floating class="layer-small">{{'full-name'|translate}}</ion-label>
      <ion-input type="text" formControlName="full_name" [(ngModel)]="full_name_data"></ion-input>
    </ion-item>  
    <ion-item class="form-error-message" *ngIf="!full_name.valid && submitAttempt">
      <p *ngIf="userRegisterForm.hasError('required', 'full_name')">{{'field-is-required'|translate}}</p>            
    </ion-item>              
  </div>

  <div class="my-row">
    <ion-item [class.invalid]="!phone.valid && submitAttempt">
      <ion-label floating class="layer-small">{{'mobile-phone'|translate}}</ion-label>
      <ion-input type="tel" formControlName="phone" [(ngModel)]="phone_data"></ion-input>
    </ion-item>
    <ion-item class="form-error-message" *ngIf="!phone.valid && submitAttempt">
      <p *ngIf="userRegisterForm.hasError('required', 'phone')">{{'field-is-required'|translate}}</p>     
      <p *ngIf="userRegisterForm.hasError('minlength', 'phone') || userRegisterForm.hasError('pattern', 'phone')">{{'mobile-phone-incorrect'|translate}}</p>
      <p *ngIf="userRegisterForm.hasError('phoneInUse', 'phone')">{{'phone-in-use'|translate}}</p>
    </ion-item>              
  </div>

  <div class="my-row">
    <ion-item class="checkbox" [class.invalid]="!terms_confirm.valid && submitAttempt">
      <ion-label class="layer-small">{{'i-confirm-the'|translate}} <button type="button" ion-button clear tappable class="buttonLink" (click)="showTerms()">{{'the-terms-and-conditions'|translate}}</button></ion-label>
      <ion-checkbox formControlName="terms_confirm" [(ngModel)]="terms_confirm_data" (ionChange)="getCheckboxValue('terms_confirm',$event)"></ion-checkbox>
    </ion-item>
    <ion-item class="form-error-message" *ngIf="!terms_confirm.valid && submitAttempt">
      <p *ngIf="userRegisterForm.hasError('required', 'terms_confirm')">{{'field-is-required'|translate}}</p>     
    </ion-item>                                                                            
  </div>  

  <button ion-button block color="wine">{{'register'|translate}}</button>
</form>

这是我的page-register-user.ts代码

import { Component} from '@angular/core';
import { IonicPage, NavController, NavParams} from 'ionic-angular';
import { Validators, FormBuilder, FormGroup, AbstractControl } from '@angular/forms';
import { PhoneValidator } from '../../providers/phone-validator/phone-validator';

@IonicPage()
@Component({
  selector: 'page-register-user',
  templateUrl: 'register-user.html',
})
export class RegisterUserPage {

  private userRegisterForm : FormGroup;
  user_type_id: AbstractControl;
  full_name: AbstractControl;
  phone: AbstractControl;
  terms_confirm: AbstractControl;
  terms_confirm_data: boolean = false;
  full_name_data: string;
  user_type_id_data: number = 2;

  submitAttempt: boolean = false;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public formBuilder: FormBuilder, 
    public phoneValidator: PhoneValidator,
  ) {    

    //set userRegisterForm
    this.userRegisterForm = this.formBuilder.group({
      user_type_id: [''],
      full_name: ['', [Validators.required, Validators.minLength(3)]],
      phone: ['', [Validators.compose([Validators.required, Validators.minLength(10), Validators.pattern('^(\\+)?(\\d+)$')])]],
      terms_confirm: ['', [Validators.requiredTrue]]
    },{
      asyncValidator: phoneValidator.checkPhone.bind(phoneValidator)      
    });
    this.full_name =  this.userRegisterForm.controls.full_name;
    this.phone =  this.userRegisterForm.controls.phone;
    this.terms_confirm = this.userRegisterForm.controls.terms_confirm;
}

这是我的电话验证器。

import { Injectable } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ServerApiRequest } from '../server-api-request/server-api-request';

@Injectable()
export class PhoneValidator {

  debouncer: any;

  constructor(public serverApiRequest: ServerApiRequest){ }

  checkPhone(group: FormGroup): any {
    clearTimeout(this.debouncer);
    return new Promise(resolve => {
      this.debouncer = setTimeout(() => {
        this.serverApiRequest.getPhoneExsist(group.controls['phone'].value, group.controls['user_type_id'].value, group.controls['user_id'] ? group.controls['user_id'].value : '').subscribe((res) => {
          if(res.phone_exsist==0){
            resolve(null);
          }else{           
            group.setErrors({phoneInUse: true});
            group.controls['phone'].setErrors({phoneInUse: true});
            resolve({'phoneInUse': true});  
          }
        }, () => {
          group.setErrors({phoneInUse: true});
          group.controls['phone'].setErrors({phoneInUse: true});
          resolve({'phoneInUse': true});
        });
      }, 1000);     

    });
  }

}