**Component.ts**
hide = true;
constructor(private userService: UserService,
private fb: FormBuilder,
private alertService: AlertService
) { }
signUpForm = this.fb.group({
_id: ['s'],
fullName: ['', [Validators.required, Validators.minLength(4)]],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(8)]],
confirmPassword: ['', Validators.required]
}, { validator: passwordMatchValidator })
/* Shorthands for form controls (used from within template) */
get fullName() { return this.signUpForm.get('fullName'); }
get email() { return this.signUpForm.get('email'); }
get password() { return this.signUpForm.get('password'); }
get confirmPassword() { return this.signUpForm.get('confirmPassword'); }
register() {
if (this.signUpForm.invalid) {
return;
}
this.userService.register(this.signUpForm.value).subscribe(data => {
console.log(this.alertService.sucess('Registration Sucessful'));
}, error => {
this.alertService.error(error);
})
}
**Component.html**
<form
class="example-form"
[formGroup]="signUpForm"
(ngSubmit)="register()"
validate
>
<mat-form-field class="example-full-width">
<mat-label>User Name</mat-label>
<input matInput formControlName="fullName" />
<mat-error *ngIf="fullName.hasError('required')">
User Name is <strong>required</strong>
</mat-error>
<mat-error *ngIf="fullName.hasError('minlength')">
User Name must have at least 4 characters
</mat-error>
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label>Email</mat-label>
<input
matInput
formControlName="email"
placeholder="Ex. pat@example.com"
/>
<mat-error
*ngIf="email.hasError('email') && !email.hasError('required')"
>
Please enter a valid email address
</mat-error>
<mat-error *ngIf="email.hasError('required')">
Email is <strong>required</strong>
</mat-error>
</mat-form-field>
<div class="example-container">
<mat-form-field class="example-full-width">
<mat-label>Password</mat-label>
<input
matInput
(input)="onPasswordInput()"
[type]="hide ? 'password' : 'text'"
formControlName="password"
/>
<mat-error *ngIf="password.hasError('required')"
>Password is <strong>required</strong></mat-error
>
<mat-error *ngIf="password.hasError('minlength')"
>Password must have at least 8 characters</mat-error
>
<button
mat-icon-button
matSuffix
(click)="hide = !hide"
[attr.aria-label]="'Hide password'"
[attr.aria-pressed]="hide"
>
<mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
</button>
</mat-form-field>
</div>
<div class="example-container">
<mat-form-field class="example-full-width">
<mat-label>Confirm Password</mat-label>
<input
matInput
type="password"
placeholder="Confirm password"
formControlName="confirmPassword"
(input)="onPasswordInput()"
/>
<mat-error *ngIf="confirmPassword.hasError('required')"
>Please confirm your password</mat-error
>
<mat-error
*ngIf="
confirmPassword.invalid && !confirmPassword.hasError('required')
"
>Passwords don't match</mat-error
>
</mat-form-field>
<div class="example-button-row">
<button
mat-raised-button
color="primary"
type="submit"
[disabled]="!signUpForm.valid"
>
Submit
</button>
<a mat-raised-button routerLink="/login" color="accent">Cancel</a>
</div>
</div>
</form>
Когда я пытаюсь показать и скрыть кнопку пароля, он отлично работает с функциями скрытия и отображения, но когда я нажимаю ту же кнопку два или более раз подряд, он ведет себя как отправка формы и показывает, что все поля формы показывают ошибки как мы можем решить эту проблему, может ли кто-нибудь помочь мне в этом.
Когда я пытаюсь показать и скрыть кнопку пароля, он отлично работает с функциями скрытия и отображения, но когда я нажимаю одну и ту же кнопку два или более раз подряд он ведет себя как отправка формы и показывает, что все поля форм показывают ошибки, как мы можем их решить, может ли кто-нибудь помочь мне в этом