ERROR DOMException: Failed to execute 'setAttribute' on 'Element': ';' is not a valid attribute name

Question

I don't get any error in my code yet it fails to redirect to signup component with an error showing core.mjs:11809 ERROR DOMException: Failed to execute 'setAttribute' on 'Element': ';' is not a valid attribute name. at EmulatedEncapsulationDomRenderer2.setAttribute

I checked for typos but i couldn't find any. I want to know where i should make changes. I have added the error message and html for your reference. enter image description here

signup.component.html

<div class="bg" style="background-color: #F8F8F8";>
  <nz-spin [nzSpinning]="isSpinning" [nzSize]="'large'" nzTip="Working...">
      <div class="parent">
        <div class="child">
          <div nz-row class="imgDiv">
            <div nz-col nzSpan="24">
              <h1 style="margin-left: 80px;">Sign Up</h1>
            </div>
          </div>
          <form nz-form>

            <nz-form-item>
              <nz-form-control nzHasFeedback nzErrorTip="The input is not valid E-mail!">
                <input nz-input placeholder="E-mail" id="email" />
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-control nzHasFeedback [nzErrorTip]="errorPass">
                <input nz-input placeholder="Password" type="password" id="password" />
                <ng-template #errorPass let-control>
                  <ng-container *ngIf="control.hasError('required')">
                    Password is Required!
                  </ng-container>
                  <ng-container *ngIf="control.hasError('pattern')">
                    Password should contain 8 characters, 1 Lowercase, 1 Uppercase , 1 Number and 1
                    Special Character
                  </ng-container>
                </ng-template>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-control nzHasFeedback [nzErrorTip]="errorTp1">
                <input nz-input type="password" placeholder="Confirm Password" id="checkpassword" />
                <ng-template #errorTp1 let-control>
                  <ng-container *ngIf="control.hasError('required')">
                    Please confirm your password!
                  </ng-container>
                  <ng-container *ngIf="control.hasError('confirm')">
                    Two Passwords you entered are mismatched!
                  </ng-container>
                </ng-template>
              </nz-form-control>
            </nz-form-item>

              <nz-form-item>
                <nz-form-control nzHasFeedback [nzErrorTip]="userErrorTp1">
                  <input nz-input placeholder="Name" id="username" />
                  <ng-template #userErrorTp1 let-control>
                    <ng-container *ngIf="control.hasError('required')">
                      Please input your username!
                    </ng-container>

                  </ng-template>
                </nz-form-control>
              </nz-form-item>

                    <button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">Register</button>
                      Or <a routerLink="/login"> login now!</a>
          </form>
        </div>
      </div>
  </nz-spin>
 </div>