remove buggy valdator
This commit is contained in:
parent
e9632c35c0
commit
53b5c49d5b
|
@ -41,20 +41,18 @@
|
||||||
pInputText
|
pInputText
|
||||||
id="email"
|
id="email"
|
||||||
formControlName="email"
|
formControlName="email"
|
||||||
[ngClass]="{ 'ng-invalid ng-dirty': emailInvalid() }"
|
|
||||||
aria-describedby="e-mail" />
|
aria-describedby="e-mail" />
|
||||||
</div>
|
</div>
|
||||||
<div class="password">
|
<div class="password">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
<label for="password">Password</label>
|
<label for="password">Password</label>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<p-password
|
||||||
pInputText
|
class="custom-p-password"
|
||||||
id="password"
|
id="password"
|
||||||
formControlName="password"
|
formControlName="password"
|
||||||
aria-describedby="password"
|
aria-describedby="password"
|
||||||
[ngClass]="{ 'ng-invalid ng-dirty': passwordInvalid() }"
|
[toggleMask]="true"></p-password>
|
||||||
type="password" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="signup">
|
<div class="signup">
|
||||||
<button pButton type="submit" label="Anmelden"></button>
|
<button pButton type="submit" label="Anmelden"></button>
|
||||||
|
@ -74,27 +72,24 @@
|
||||||
pInputText
|
pInputText
|
||||||
id="email"
|
id="email"
|
||||||
formControlName="email"
|
formControlName="email"
|
||||||
[ngClass]="{ 'ng-invalid ng-dirty': emailInvalid() }"
|
|
||||||
aria-describedby="e-mail" />
|
aria-describedby="e-mail" />
|
||||||
</div>
|
</div>
|
||||||
<div class="password">
|
<div class="password">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
<label for="password">Password</label>
|
<label for="password">Password</label>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<p-password
|
||||||
pInputText
|
class="custom-p-password"
|
||||||
id="password"
|
id="password"
|
||||||
formControlName="password"
|
formControlName="password"
|
||||||
aria-describedby="password"
|
aria-describedby="password"
|
||||||
[ngClass]="{ 'ng-invalid ng-dirty': passwordInvalid() }"
|
[toggleMask]="true"></p-password>
|
||||||
type="password" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="terms">
|
<div class="terms">
|
||||||
<p-checkbox
|
<p-checkbox
|
||||||
formControlName="terms"
|
formControlName="terms"
|
||||||
label="Ich habe die AGB gelesen und stimme zu."
|
label="Ich habe die AGB gelesen und stimme zu."
|
||||||
name="terms"
|
name="terms"
|
||||||
[ngClass]="{ 'ng-invalid ng-dirty': termsInvalid() }"
|
|
||||||
[binary]="true" />
|
[binary]="true" />
|
||||||
</div>
|
</div>
|
||||||
<div class="signup">
|
<div class="signup">
|
||||||
|
|
|
@ -62,6 +62,9 @@
|
||||||
input {
|
input {
|
||||||
min-width: 500px;
|
min-width: 500px;
|
||||||
}
|
}
|
||||||
|
::ng-deep p-password.custom-p-password div input {
|
||||||
|
min-width: 500px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.terms {
|
.terms {
|
||||||
|
@ -81,12 +84,3 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .ng-invalid.ng-dirty {
|
|
||||||
// border: 1px solid red;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .error {
|
|
||||||
// color: red;
|
|
||||||
// font-size: 12px;
|
|
||||||
// }
|
|
||||||
|
|
|
@ -6,7 +6,6 @@ import {
|
||||||
WritableSignal,
|
WritableSignal,
|
||||||
signal,
|
signal,
|
||||||
effect,
|
effect,
|
||||||
DestroyRef,
|
|
||||||
} from '@angular/core';
|
} from '@angular/core';
|
||||||
import { InputTextModule } from 'primeng/inputtext';
|
import { InputTextModule } from 'primeng/inputtext';
|
||||||
import {
|
import {
|
||||||
|
@ -19,6 +18,7 @@ import {
|
||||||
} from '@angular/forms';
|
} from '@angular/forms';
|
||||||
import { ButtonModule } from 'primeng/button';
|
import { ButtonModule } from 'primeng/button';
|
||||||
import { CheckboxModule } from 'primeng/checkbox';
|
import { CheckboxModule } from 'primeng/checkbox';
|
||||||
|
import { PasswordModule } from 'primeng/password';
|
||||||
|
|
||||||
type AuthAction = 'register' | 'signup';
|
type AuthAction = 'register' | 'signup';
|
||||||
|
|
||||||
|
@ -32,6 +32,7 @@ type AuthAction = 'register' | 'signup';
|
||||||
ReactiveFormsModule,
|
ReactiveFormsModule,
|
||||||
ButtonModule,
|
ButtonModule,
|
||||||
CheckboxModule,
|
CheckboxModule,
|
||||||
|
PasswordModule,
|
||||||
],
|
],
|
||||||
templateUrl: './register-root.component.html',
|
templateUrl: './register-root.component.html',
|
||||||
styleUrl: './register-root.component.scss',
|
styleUrl: './register-root.component.scss',
|
||||||
|
@ -44,14 +45,11 @@ export class RegisterRootComponent implements OnInit {
|
||||||
public isSignupSignal: WritableSignal<boolean> = signal(false);
|
public isSignupSignal: WritableSignal<boolean> = signal(false);
|
||||||
public isDisplayButtons: WritableSignal<boolean> = signal(true);
|
public isDisplayButtons: WritableSignal<boolean> = signal(true);
|
||||||
|
|
||||||
public emailInvalid: WritableSignal<boolean | null> = signal(null);
|
public emailInvalid: WritableSignal<string | null> = signal(null);
|
||||||
public passwordInvalid: WritableSignal<boolean | null> = signal(null);
|
public passwordInvalid: WritableSignal<string | null> = signal(null);
|
||||||
public termsInvalid: WritableSignal<boolean | null> = signal(null);
|
public termsInvalid: WritableSignal<string | null> = signal(null);
|
||||||
|
|
||||||
constructor(
|
constructor(private readonly formBuilder: FormBuilder) {
|
||||||
private readonly formBuilder: FormBuilder,
|
|
||||||
private readonly destroyRef: DestroyRef
|
|
||||||
) {
|
|
||||||
effect(() => {
|
effect(() => {
|
||||||
if (this.form) {
|
if (this.form) {
|
||||||
if (this.isRegisterSignal()) {
|
if (this.isRegisterSignal()) {
|
||||||
|
@ -68,8 +66,8 @@ export class RegisterRootComponent implements OnInit {
|
||||||
|
|
||||||
public ngOnInit(): void {
|
public ngOnInit(): void {
|
||||||
this.form = this.formBuilder.group({
|
this.form = this.formBuilder.group({
|
||||||
email: ['', [Validators.required, Validators.email]],
|
email: ['', [Validators.required]],
|
||||||
password: ['', [Validators.required, Validators.minLength(6)]],
|
password: ['', [Validators.required, Validators.minLength(8)]],
|
||||||
terms: [false, [Validators.requiredTrue]],
|
terms: [false, [Validators.requiredTrue]],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -86,12 +84,9 @@ export class RegisterRootComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
public onSubmit(): void {
|
public onSubmit(): void {
|
||||||
this.form?.markAllAsTouched();
|
if (this.form && this.isSignupSignal() && this.form.valid) {
|
||||||
this.updateFieldInvalidity();
|
|
||||||
|
|
||||||
if (this.isSignupSignal() && this.form?.valid) {
|
|
||||||
this.signin();
|
this.signin();
|
||||||
} else if (this.isRegisterSignal() && this.form?.valid) {
|
} else if (this.form && this.isRegisterSignal() && this.form.valid) {
|
||||||
this.register();
|
this.register();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -101,20 +96,9 @@ export class RegisterRootComponent implements OnInit {
|
||||||
this.isSignupSignal.set(false);
|
this.isSignupSignal.set(false);
|
||||||
this.isDisplayButtons.set(true);
|
this.isDisplayButtons.set(true);
|
||||||
|
|
||||||
this.emailInvalid.set(false);
|
this.emailInvalid.set(null);
|
||||||
this.passwordInvalid.set(false);
|
this.passwordInvalid.set(null);
|
||||||
this.termsInvalid.set(false);
|
this.termsInvalid.set(null);
|
||||||
}
|
|
||||||
|
|
||||||
private updateFieldInvalidity(): void {
|
|
||||||
this.emailInvalid.set(this.isFieldInvalid('email'));
|
|
||||||
this.passwordInvalid.set(this.isFieldInvalid('password'));
|
|
||||||
this.termsInvalid.set(this.isFieldInvalid('terms'));
|
|
||||||
}
|
|
||||||
|
|
||||||
private isFieldInvalid(field: string): boolean {
|
|
||||||
const formField = this.form?.get(field);
|
|
||||||
return !!formField && !formField.valid && formField.touched;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private signin(): void {
|
private signin(): void {
|
||||||
|
|
Loading…
Reference in New Issue