2
ここにはdemo plnkrがあります。私は、テキストボックスと確認ボタンを持つOTP入力用のカスタム非同期バリデータを実装しようとしています。ユーザーがOTPの検証ボタンまたはフォーム送信ボタンをクリックしたときにのみ入力を検証したいと思います。現在、テキストチェンジイベントで検証が行われており、動作していません。 フォームHTML：角度カスタム非同期バリデーターが機能しない
<form [formGroup]="registrationForm" (ngSubmit)="registrationForm.valid && submitRegistration(registrationForm.value)" novalidate>
<fieldset class="form-group">
<label for="e-mail">Mobile</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Mobile" formControlName="mobile">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Send OTP</button>
</span>
</div>
<div class="form-text error" *ngIf="registrationForm.controls.mobile.touched">
<div *ngIf="registrationForm.controls.mobile.hasError('required')">Mobile is required.</div>
</div>
</fieldset>
<fieldset class="form-group">
<label for="e-mail">Verify OTP</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="OTP" formControlName="otp">
<span class="input-group-btn">
<button class="btn btn-secondary" (click)="veryOTPAsyn(otp)" type="button">Verify</button>
</span>
</div>
<div class="form-text error" *ngIf="registrationForm.controls.otp.touched">
<div *ngIf="registrationForm.controls.otp.hasError('required')">OTP is required.</div>
<div *ngIf="registrationForm.controls.otp.hasError('invalidOtp')">OTP is invalid.</div>
</div>
</fieldset>
<button class='btn btn-primary' type='submit' [disabled]='!registrationForm.valid'>Submit Registration Form</button>
</form>
フォームコンポーネント：
export class ExampleFormComponent {
registrationForm: FormGroup;
constructor(public fb: FormBuilder) {
// Example use of FormBuilder, FormGroups, and FormControls
this.registrationForm = fb.group({
mobile: ['', Validators.required],
otp: ['', Validators.compose([Validators.required, this.veryOTPAsyn.bind(this)])],
dob: ['', Validators.required],
email: ['', Validators.compose([Validators.required, emailValidator])],
password: ['', Validators.required],
confirmPassword: ['', Validators.required],
firstName: ['', Validators.required],
lastName: ['', Validators.required]
}, {validator: matchingPasswords('password', 'confirmPassword')})
}
submitRegistration(value: Object): void {
console.log(value);
}
veryOTPAsyn(otpControl: FormControl): Promise<any> {
console.log(otpControl)
console.log(otpControl.hasError('invalidOtp'))
return new Promise<any>(
(resolve, reject) => {
setTimeout(() => {
resolve({invalidOtp:true});
}, 500);
});
}
}