[英]Two times form submitted, when I click the hide and show button
**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>
當我嘗試顯示和隱藏密碼按鈕時,它可以很好地隱藏和顯示功能,但是當我連續兩次或多次單擊同一個按鈕時,它表現為表單提交並顯示所有 forms 字段顯示錯誤我們如何解決它,誰可以幫我這個事。
當我嘗試顯示和隱藏密碼按鈕時,它可以很好地隱藏和顯示功能,但是當我連續兩次或多次單擊同一個按鈕時,它表現為表單提交並顯示所有 forms 字段顯示錯誤我們如何解決它,誰可以幫我這個事
按鈕的默認類型是“提交”,只需包含 type="button" 以避免它提交
這是因為您的按鈕隱藏在表單內部,所以它被視為提交按鈕,您應該添加:
type="button"
到表單內的所有按鈕,不是提交按鈕。
<button
mat-icon-button
matSuffix
type="button"
(click)="hide = !hide"
[attr.aria-label]="'Hide password'"
[attr.aria-pressed]="hide"
>
<mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.