Я работаю над Angular 7 форм.Я сделал встроенную проверку для формы, и это сработало отлично, но когда я собираюсь сделать пользовательскую проверку и сделал пользовательскую функцию для этого, я получаю ошибку для поля userpass.То, что я делаю, это просто для сравнения двух паролей, если они совпадают, то должна отображаться ошибка.
HTML
<form action="" method="POST" id="user-register" [formGroup]="registrationForm" (onSubmit)="registerUser(registrationForm)">
<div class="inInput">
<input type="text" id="username" formControlName="username" [class.is-invalid]="registrationForm.get('username').invalid && registrationForm.get('username').touched">
<label for="username">Type Your Name</label>
<!-- <small [class.d-none]="registrationForm.get('username').valid || registrationForm.get('username').untouched" class="error">Username is required !</small> -->
<div *ngIf="username.invalid && username.touched">
<small *ngIf="username.errors?.minlength" class="error">The minimum length should be 5.</small>
<small *ngIf="username.errors?.maxlength" class="error">The manimum length is 20 character.</small>
<small *ngIf="username.errors?.required" class="error">The username is required.</small>
</div>
</div>
<div class="inInput">
<input type="email" id="useremail" formControlName="useremail" [class.is-invalid]="registrationForm.get('useremail').invalid && registrationForm.get('useremail').touched">
<label for="useremail">Type Your Email</label>
<div *ngIf="useremail.invalid && useremail.touched">
<small *ngIf="useremail.errors?.email" class="error">Invalid Email</small>
<small *ngIf="useremail.errors?.required" class="error">The username is required.</small>
</div>
</div>
<div class="inInput">
<input type="password" id="userpass" formControlName="userpass" [class.is-invalid]="registrationForm.get('userpass').invalid && registrationForm.get('userpass').touched">
<label for="userpass">Type Your Password</label>
<div *ngIf="userpass.invalid && userpass.touched">
<small *ngIf="userpass.errors?.minlength" class="error">The minimum length should be 5.</small>
<small *ngIf="userpass.errors?.passwordpattern" class="error">Password cannot be {{userpass.errors?.passwordpattern.value}}.</small>
<small *ngIf="userpass.errors?.mismatch" class="error"> Passwords doesn't match. </small>
<small *ngIf="userpass.errors?.required" class="error">The username is required.</small>
</div>
</div>
<div class="inInput">
<input type="password" id="userpass2" formControlName="userpass2" [class.is-invalid]="registrationForm.get('userpass2').invalid && registrationForm.get('userpass2').touched">
<label for="userpass2">Re-Type Your Password</label>
<div *ngIf="userpass2.invalid && userpass2.touched">
<small *ngIf="userpass2.errors?.minlength" class="error">The minimum length should be 5.</small>
<small *ngIf="userpass2.errors?.passwordpattern" class="error">Password cannot be {{userpass.errors?.passwordpattern.value}}.</small>
<small *ngIf="userpass2.errors?.mismatch" class="error"> Passwords doesn't match. </small>
<small *ngIf="userpass2.errors?.required" class="error">The username is required.</small>
</div>
</div>
<div class="user-register-submit">
<button type="submit" class="inBtn inBtn-info"> Register Now ! </button>
</div>
</form>
Регистрационный.ts код
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { passWordValidation, passwordCompare } from '../globals/validators';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent {
constructor(private fb:FormBuilder) {}
get username(){ return this.registrationForm.get('username'); }
get useremail(){ return this.registrationForm.get('useremail'); }
get userpass(){ return this.registrationForm.get('userpass'); }
get userpass2(){ return this.registrationForm.get('userpass2'); }
registrationForm = this.fb.group({
username : ['', [Validators.required, Validators.minLength(5), Validators.maxLength(20)]],
useremail : ['',[Validators.required, Validators.email]],
userpass : ['',[Validators.required, Validators.minLength(5), passWordValidation, passwordCompare(this.registrationForm.get('userpass'), this.registrationForm.get('userpas2'))]],
userpass2 : ['',[Validators.required, Validators.minLength(5), passWordValidation, passwordCompare(this.registrationForm.get('userpass'), this.registrationForm.get('userpass2'))]]
})
}
Код validators.ts
import {AbstractControl, ValidatorFn} from '@angular/forms';
export function passWordValidation(control : AbstractControl):{[key:string]:any} | false{
const forbidden = /admin/.test(control.value);
return forbidden ? {'passwordpattern': {value:control.value}} : false;
}
//Compare the inputs
export function passwordCompare(userpass: AbstractControl , userpass2 : AbstractControl): ValidatorFn{
return (): null | {[key:string]:any} => {
return ((userpass.value == userpass2.value) && (userpass2.value == userpass.value)) ? null : {'mismatch': true} ;
}
}
первая функция прекрасно работает в validators.ts, но я не знаю, что не так со второй.Когда я удаляю passwordCompare() из register.ts, я не получаю ошибок.