当我单击隐藏和显示按钮时，提交了两次表单

Question

    **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 字段显示错误我们如何解决它，谁可以帮我这个事

Answer 1

按钮的默认类型是“提交”，只需包含 type="button" 以避免它提交

Answer 2

这是因为您的按钮隐藏在表单内部，所以它被视为提交按钮，您应该添加：

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>