signup.html :

<form [formGroup]="signupForm"  (submit)="onSubmit()" class="form-detail" >
                <h2>Registration Form</h2>
                <div class="form-row-total">
                    <div class="form-row">
                        <input type="text" name="full-name" id="full-name" class="input-text" placeholder="Your Name" required>
                    </div>
                    <div class="row" >
                          <div *ngIf="signupForm.controls.name.errors?.['required']" class="alert alert-danger" role="alert">
                            Enter a name
                          </div>
                          <div *ngIf="signupForm.controls.name.errors?.['nom'] " class="alert alert-danger" role="alert">
                            Invalid name form
                          </div>
                     </div>
                    <div class="form-row">
                        <input type="text" name="your-email" id="your-email" class="input-text" placeholder="Your Email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}">
                    </div>
                    <div class="row" >
                          <div *ngIf="signupForm.controls.email.errors?.['required'] " class="alert alert-danger" role="alert">
                            Enter an email
                          </div>
                          <div *ngIf="signupForm.controls.email.errors?.['email'] " class="alert alert-danger" role="alert">
                            Invalid email form
                          </div>
                          <div *ngIf="userexist" class="alert alert-danger" role="alert">
                            User already exists
                          </div>
                      </div>
                </div>
                <div class="form-row-total">
                    <div class="form-row">
                        <input type="password" name="password" id="password" class="input-text" placeholder="Your Password" required>
                    </div>
                    <div class="row" >
                          <div *ngIf="signupForm.controls.password.errors?.['required']   " class="alert alert-danger" role="alert">
                            Enter a password
                          </div>
                          <div *ngIf="signupForm.controls.password.errors?.['matchPassword']  " class="alert alert-danger" role="alert">
                            Passwords does not match
                          </div>
                          
                     </div>
                    <div class="form-row">
                        <input type="password" name="comfirm-password" id="comfirm-password" class="input-text" placeholder="Confirm Password" required>
                    </div>
                    <div class="row" >
                        <div *ngIf="signupForm.controls.password.errors?.['matchPassword']  " class="alert alert-danger" role="alert">
                          Passwords does not match
                        </div>
                        
                   </div>
                </div>
                <div class="form-row-last">
                    <input type="submit" name="register" class="register" value="Sign Up">
                </div>
            </form>

signup.ts:

async onSubmit(): Promise<void> {
    if (this.signupForm.valid) {
      const name = this.signupForm.get('name')!.value;
      const email = this.signupForm.get('email')!.value;
      const password = this.signupForm.get('password')!.value;
      const confirmpassword = this.signupForm.get('confirmpassword')!.value;
      const userExists = await this.checkIfUserExists(email);

      if (userExists) {
        this.errorMessage = 'User already exists. Please use a different email.';
        this.userexist=true;
      } else {
        this.errorMessage = null;
        this.signupForm.reset();
        await this.addNewUser(name, email, password);
        await this.registeruser(name, email, password);
        this.router.navigate(['/dashboard']); 
      }
    } else {
      console.log('Form is invalid');
    }
  }

so after filling the input fields , the msg “form is invalid” always appears in dev tools whenever i press on the button even if the formats are correct
plz if u can improve my html code ( i want the alerts to appear just after pressing the button , and then they disappear after filling the fields again , or u can do whatever u want if u have a better idea )