fix validators
This commit is contained in:
parent
53b5c49d5b
commit
0e59de15f5
|
@ -19,6 +19,7 @@ import {
|
|||
import { ButtonModule } from 'primeng/button';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { PasswordModule } from 'primeng/password';
|
||||
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
|
||||
|
||||
type AuthAction = 'register' | 'signup';
|
||||
|
||||
|
@ -66,10 +67,40 @@ export class RegisterRootComponent implements OnInit {
|
|||
|
||||
public ngOnInit(): void {
|
||||
this.form = this.formBuilder.group({
|
||||
email: ['', [Validators.required]],
|
||||
password: ['', [Validators.required, Validators.minLength(8)]],
|
||||
email: ['', {
|
||||
validators: [Validators.required, this.customEmailValidator()],
|
||||
updateOn: 'change'
|
||||
}],
|
||||
password: ['', {
|
||||
validators: [Validators.required, this.passwordValidator()],
|
||||
updateOn: 'change'
|
||||
}],
|
||||
terms: [false, [Validators.requiredTrue]],
|
||||
});
|
||||
|
||||
this.form.get('email')?.valueChanges.subscribe(value => {
|
||||
const emailControl = this.form?.get('email');
|
||||
if (emailControl) {
|
||||
if (value.length >= 4) {
|
||||
emailControl.setValidators([Validators.required, this.customEmailValidator()]);
|
||||
} else {
|
||||
emailControl.setValidators([Validators.required, Validators.minLength(4)]);
|
||||
}
|
||||
emailControl.updateValueAndValidity({ emitEvent: false });
|
||||
}
|
||||
});
|
||||
|
||||
this.form?.get('password')?.valueChanges.subscribe(value => {
|
||||
const passwordControl = this.form?.get('password');
|
||||
if (passwordControl) {
|
||||
if (value.length >= 8) {
|
||||
passwordControl.setValidators([Validators.required, this.passwordValidator()]);
|
||||
} else {
|
||||
passwordControl.setValidators([Validators.required, Validators.minLength(8)]);
|
||||
}
|
||||
passwordControl.updateValueAndValidity({ emitEvent: false });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public toggleAction(action: AuthAction): void {
|
||||
|
@ -82,15 +113,41 @@ export class RegisterRootComponent implements OnInit {
|
|||
}
|
||||
this.isDisplayButtons.set(false);
|
||||
}
|
||||
onSubmit() {
|
||||
const emailControl = this.form?.get('email');
|
||||
const passwordControl = this.form?.get('password');
|
||||
const termsControl = this.form?.get('terms');
|
||||
|
||||
public onSubmit(): void {
|
||||
if (this.form && this.isSignupSignal() && this.form.valid) {
|
||||
this.signin();
|
||||
} else if (this.form && this.isRegisterSignal() && this.form.valid) {
|
||||
this.register();
|
||||
// Markieren des E-Mail-Feldes als 'touched' und 'dirty', falls es leer ist oder ungültig
|
||||
if (!emailControl?.value || emailControl?.invalid) {
|
||||
emailControl?.markAsTouched();
|
||||
emailControl?.markAsDirty();
|
||||
emailControl?.updateValueAndValidity();
|
||||
}
|
||||
|
||||
// Markieren des Passwort-Feldes als 'touched' und 'dirty', falls es leer ist oder ungültig
|
||||
if (!passwordControl?.value || passwordControl.invalid) {
|
||||
passwordControl?.markAsTouched();
|
||||
passwordControl?.markAsDirty();
|
||||
passwordControl?.updateValueAndValidity();
|
||||
}
|
||||
|
||||
if(!termsControl?.value || termsControl.invalid) {
|
||||
termsControl?.markAsTouched();
|
||||
termsControl?.markAsDirty();
|
||||
termsControl?.updateValueAndValidity();
|
||||
}
|
||||
|
||||
// Formularvalidierung
|
||||
if (this.form?.valid) {
|
||||
// Logik zum Absenden des Formulars
|
||||
console.log('Form submitted:', this.form.value);
|
||||
} else {
|
||||
console.log('Form is invalid');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public DEBUG_restSignal(): void {
|
||||
this.isRegisterSignal.set(false);
|
||||
this.isSignupSignal.set(false);
|
||||
|
@ -101,6 +158,25 @@ export class RegisterRootComponent implements OnInit {
|
|||
this.termsInvalid.set(null);
|
||||
}
|
||||
|
||||
public customEmailValidator(): ValidatorFn {
|
||||
return (control: AbstractControl): ValidationErrors | null => {
|
||||
const value = control.value;
|
||||
if (value.length < 4) {
|
||||
console.log(value.length);
|
||||
return { emailTooShort: true };
|
||||
}
|
||||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailPattern.test(value) ? null : { emailInvalid: true };
|
||||
};
|
||||
}
|
||||
|
||||
public passwordValidator(): ValidatorFn {
|
||||
return (control: AbstractControl): ValidationErrors | null => {
|
||||
const value = control.value;
|
||||
return value.length >= 8 ? null : { passwordTooShort: true };
|
||||
};
|
||||
}
|
||||
|
||||
private signin(): void {
|
||||
console.log('Signin...');
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue