Angular 表单提交已取消，因为表单未连接，但即使在type="；按钮“；

我正试图提交一份登记表，但它不起作用，控制台上会显示一条警告说 “表单提交已取消，因为表单未连接”

注册用户
编辑详细信息
：您不能提交空表单
用户名
此处首选员工id
用户名已被占用
输入的用户名与当前用户名相同
请输入有效的用户名
全名
请输入有效的名称
电子邮件
电子邮件已被接收
输入的电子邮件与当前电子邮件相同
电子邮件
请输入有效的电子邮件
电话号码
电话号码
已经采取
输入的电话号码与当前电话号码相同
请输入有效的电话号码
7XXXXXXXX |+94XXXXXXXX | 00CCXXXXXXXX
密码
{{隐藏？'visibility_off'：'visibility'}
请输入有效密码（至少8个字符）
确认密码
这必须与您的密码匹配
角色代码
无效的角色代码格式
{{isRegisterMode？'Register'：'Update'}
重置
产生价值

当我提交时，它给出错误500，如下所示

这在服务器上不是问题，因为我试过邮递员，它可以工作

有一次，在除重置和提交以外的所有按钮上执行type=“button”后，错误消失，但再次发生

<h1 *ngIf="isRegisterMode">Register User</h1>
<h3 *ngIf="!isRegisterMode">Edit Details
  <mat-error *ngIf="form.hasError('FormEmpty')" id="empty-form-error"> : You cannot submit an empty form</mat-error>
</h3>
<div class="registerFormContainer">
  <mat-card>
    <mat-spinner *ngIf="isLoading"></mat-spinner>
    <form *ngIf="!isLoading" #formDirective="ngForm"  [formGroup]="form" (submit)="onSubmit(formDirective)">
      <mat-form-field>
        <mat-label>
          Username
        </mat-label>
        <input (focusout)="checkUsername()" [placeholder]="isRegisterMode ? 'employee id' : 'current : '+user.username" [required]="isRegisterMode" formControlName="username"
               matInput
               type="text">
        <mat-hint>Employee id is preferred here</mat-hint>
        <mat-error *ngIf="this.form.controls['username'].hasError('usernameTaken')">username already taken</mat-error>
        <mat-error *ngIf="this.form.controls['username'].hasError('sameAsCurrent')">entered username is same as current
        </mat-error>
        <mat-error *ngIf="!distUsernameError">Please enter a valid username</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>
          Full Name
        </mat-label>
        <input [placeholder]="isRegisterMode ? 'fname lname' : 'current : '+user.fullName" [required]="isRegisterMode" formControlName="fullName" matInput

               type="text">
        <mat-error>Please enter a valid name</mat-error>

      </mat-form-field>

      <mat-form-field>
        <mat-label>
          Email
        </mat-label>
        <input (focusout)="checkEmail()" [placeholder]="isRegisterMode? 'name@email.com': 'current : '+user.email" [required]="isRegisterMode" formControlName="email"
               matInput type="email">
        <mat-error *ngIf="this.form.controls['email'].hasError('emailTaken')">Email already taken</mat-error>
        <mat-error *ngIf="this.form.controls['email'].hasError('sameAsCurrent')">entered email is same as current
          email
        </mat-error>
        <mat-error *ngIf="!distEmailError">Please enter a valid email</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>
          Telephone Number
        </mat-label>
        <input (focusout)="checkTelephone()" [placeholder]="isRegisterMode?'07XXXXXXXX' : 'current : '+user.telephoneNumber" formControlName="telephoneNumber" matInput maxlength="14"
               minlength="9"
               type="text">
        <mat-error *ngIf="this.form.controls['telephoneNumber'].hasError('telephoneNumberTaken')">telephone number
          already taken
        </mat-error>
        <mat-error *ngIf="this.form.controls['telephoneNumber'].hasError('sameAsCurrent')">
          entered telephone number is same as current
        </mat-error>
        <mat-error *ngIf="!distTpNoError">Please enter a valid telephone number</mat-error>
        <mat-hint>7XXXXXXXX | +94XXXXXXXXX | 00CCXXXXXXXXX</mat-hint>
      </mat-form-field>

      <mat-form-field *ngIf="isRegisterMode">
        <mat-label>
          Password
        </mat-label>
        <input [type]="hide ? 'password' : 'text'" formControlName="password" matInput placeholder="minimum 8 characters"
               required>
        <button type="button" (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide" mat-icon-button
                matSuffix>
          <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
        </button>
        <mat-error>Please enter a valid Password (min 8 characters)</mat-error>
      </mat-form-field>

      <mat-form-field *ngIf="isRegisterMode">
        <mat-label>
          Confirm Password
        </mat-label>
        <input [placeholder]="'must match with above'" formControlName="confirmPassword" matInput required
               type="password">
        <mat-error>This must match with your password</mat-error>
      </mat-form-field>

      <mat-form-field *ngIf="isRegisterMode && showRoleCode">
        <mat-label>
          Role Code
        </mat-label>
        <input formControlName="roleCode" matInput placeholder="Code(Only for super admins)" type="text">
        <mat-error>Invalid role code format</mat-error>
      </mat-form-field>

      <mat-card-actions>
        <button
          (mouseover)="checkUpdateNullAndSetError()"

          [disabled]="this.form.invalid"
          color="primary"
          id="register-button"
          mat-raised-button
          type="submit"
        >
          {{isRegisterMode ? 'Register' : 'Update'}}

        </button>
        <button color="warn" id="rest-button" mat-raised-button type="reset">
          reset
        </button>
        <button (click)="generateFormValues()" color="accent" id="gen-button" mat-raised-button type="button">
          Generate Values
        </button>

      </mat-card-actions>
    </form>
  </mat-card>
</div>
<div><p></p></div>