#angular #angular-reactive-forms #angular-forms
#angular #angular-reactive-forms #angular-формы
Вопрос:
У меня есть эта FormGroup с некоторыми пользовательскими проверками. Кнопка отправки отключена до тех пор, пока форма не станет действительной. Но по какой-то причине я не могу проверить эту форму.
Я что-то здесь упускаю? Я могу регистрировать каждый элемент управления, который проверяется как TRUE, но не для всей формы.
initForm() {
this.form = this.formBuilder.group( {
first_name: [ '', Validators.required ],
last_name: [ '', Validators.required ],
email: [ email || '', Validators.required ],
mobileNumber: [ '' ],
city: [ '', this.validateCity.bind( this ) ],
location: [ null, Validators.required ],
role: [ '', Validators.required ],
password: [ '', Validators.required ],
confirmPassword: [ '', Validators.required ],
agreedToTerms: [ false, Validators.requiredTrue ]
}, {
validators: this.validateForm.bind( this )
} );
}
private validateForm( group: FormGroup ): ValidationErrors | null {
const pass1: string = group.get( 'password' ).value;
const pass2: string = group.get( 'confirmPassword' ).value;
const email: string = group.get( 'email' ).value;
const errors: any = {};
if ( !email ) {
errors.emailRequired = true;
} else if ( !email.match( /[^@s] @[^@s] .[^@s] / ) ) {
errors.invalidEmail = true;
}
if ( !pass1 ) {
errors.passwordRequired = true;
}
if ( pass1.length < this.minPasswordLength ) {
errors.passwordMinLength = true;
}
const passwordRulesRegEx = new RegExp(/^(?=(.*d))(?=.*[@#-_$%^amp; =§!?])(?=.*[a-z])(?=.*[A-Z])[0-9A-Za-z@#-_$%^amp; =§!?]{8,}$/);
if(!passwordRulesRegEx.test(pass1)){
errors.passwordMinRules = true;
}
const passwordRulesNumberRegEx = new RegExp(/^(?=(.*d))(?=.*[@#-_$%^amp; =§!?])[0-9A-Za-z@#-_$%^amp; =§!?]{1,}$/);
if (!passwordRulesNumberRegEx.test(pass1)) {
errors.passwordMinRulesNumbersSymbols = true;
}
const passwordRulesUppercaseRegEx = new RegExp(/^(?=.*[A-Z])(?=.*[a-z])[0-9A-Za-z@#-_$%^amp; =§!?]{1,}$/);
if (!passwordRulesUppercaseRegEx.test(pass1)) {
errors.passwordMinRulesUpperLowercase = true;
}
if ( pass1 !== pass2 ) {
errors.passwordMismatch = true;
}
return errors;
}
Комментарии:
1. похоже, у вас проблема с типом, в
agreedToTerms: [ false, Validators.requiredTrue ]
нем следует указатьValidators.required
вместоValidators.requiredTrue
попробуйте2. Также для электронной почты
email: [ email || '', Validators.required ]
следуетemail: [ email ? email :'', Validators.required ]
использовать тернарный оператор3. Если ни один из них не работает, создайте пример stackblitz, там у нас может быть лучшая идея для отладки проблемы.
4. Привет, @KamranKhatti, спасибо, приятель! Я пробовал их, но все еще ничего. Это так странно. Я создам файл stackblitz
5. Я предполагаю, что проблема в том, что вы всегда возвращаете объект в своей функции проверки, даже если он пуст. Вы должны проверить длину ключей и передать значение null, если оно пустое:
return Object.keys(errors).length ? errors : null