表单提交成功后出现验证错误

Question

我正在使用 angular 8 和 angular material 7。我正在使用响应式表单来创建和提交表单。提交表单后，我正在以编程方式重置表单并标记为 untouchewd。但是在每次提交之后，我看到所有的验证都在触发，并且全部结束

export class RegisterUserComponent implements OnInit{

  createUserForm: FormGroup;
  allRolesList: Array<UserRole>;
  assignedRoles: Array<UserRole>[];
  assignedRolesChanged = new Subject<Array<UserRole>>();
  newUser: GetUserResponse;

  constructor(private roleService: RoleService, private userService: UsersService) {
    this.roleService.allRolesListChanged.subscribe((res: Array<UserRole>)=>{
      this.allRolesList = res;
    });

    this.userService.newUserCreated.subscribe((res: GetUserResponse)=>{
      this.newUser = res;
      this.createUserForm.reset(true);
      this.createUserForm.markAsUntouched({onlySelf: true});
    });
   }

  async ngOnInit() {
    this.roleService.getAllRoles();

    this.initForm();
  }

  initForm(){
    this.createUserForm = new FormGroup({
      loginId: new FormControl(null, [Validators.required, Validators.email]),
      firstName: new FormControl(null, Validators.required),
      lastName: new FormControl(null, Validators.required),
      userRoles: new FormControl(null)
    });
  }
  onSubmit(){
    let data = this.createUserForm.value;
    console.log(data);
     let req: UserRequest = {
       loginId: data.loginId ? data.loginId.trim() : undefined, 
       firstName:data.firstName ? data.firstName.trim() : undefined, 
       lastName:data.lastName ? data.lastName.trim() : undefined, 
       assignedRoles: {userRoles:data.userRoles}
      };
     console.log(req);

    this.userService.registerNewUser(req);
  }

}

for 的 HTML 模板非常简单，如下所示：

<div class="large-box mat-elevation-z4">
    <form id="simple-form-input" class="search-container" [formGroup]="createUserForm" (ngSubmit)="onSubmit()">
        <table>
            <tbody>
                <tr>
                    <td>
                </tr>
            </tbody>
        </table>
        <table cellspacing="0" cellpadding="5">
            <tbody>
                <tr>
                    <td>
                        <mat-form-field>
                            <mat-label>Login ID</mat-label>
                            <input matInput formControlName="loginId" type="text" name="loginId" placeholder="Login ID">
                        </mat-form-field>
                    </td>
                </tr>
                <tr>
                    <td>
                        <mat-form-field>
                            <mat-label>First Name</mat-label>
                            <input matInput formControlName="firstName" type="text" name="firstName"
                                placeholder="First Name">
                        </mat-form-field>
                    </td>
                </tr>
                <tr>
                    <td>
                        <mat-form-field>
                            <mat-label>Last Name</mat-label>
                            <input matInput formControlName="lastName" type="text" name="lastName"
                                placeholder="Last Name">
                        </mat-form-field>
                    </td>
                </tr>
                <tr>
                    <td>
                        <mat-form-field>
                            <mat-label>Access Privileges</mat-label>
                            <mat-select formControlName="userRoles" name="userRoles" multiple>
                                <mat-option *ngFor="let userRole of allRolesList" [value]="userRole">
                                    {{userRole.name}}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button [disabled]="!createUserForm.valid" type="submit" color="primary" mat-raised-button>Submit</button>
                    </td>
                </tr>

            </tbody>
        </table>
    </form>
</div>

Answer 1

控件设置为untouched是不够的，你需要清除由于Validators.required导致重置时出现的控件错误：

this.createUserForm.reset();
Object.keys(this.createUserForm.controls).forEach(
  key => this.createUserForm.controls[key].setErrors(null)
);
this.createUserForm.markAsUntouched({onlySelf: true});