Hi there,
I am using asyncValidator to validate that a phone number is not already registered in the DB.
But when the user presses Submit button it dose the check and dose not submit the form even though the phone number is valid.
Just after a second Submit press it submits the form.
What can causes this?
And how can I fix it so it will submit on the first time?
Here is my page-register-user.html code:
<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>
And here is my page-register-user.ts code
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;
}
And here is my phone-validator.ts servise
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);
});
}
}