Two times form submitted, when I click the hide and show button

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>

When I try to show and hide the password button it working fine with hiding and show functionality, but when I click the same button two or more times continuously it behaves as form submit and showing all forms fields are showing errors how can we resolve it, can anyone help me on this.

When I try to show and hide the password button it working fine with hiding and show functionality, but when I click the same button two or more times continuously it behaves as form submit and showing all forms fields are showing errors how can we resolve it, can anyone help me on this

Answer 1

Default type for button are "submit", just include type="button" to avoid it to submit

Answer 2

It is because your button hide, is inside the form, so it's considered as submit button, you should add:

type="button"

to all your button inside the form, that are not submit buttons.

<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>