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

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);
  }

}

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

<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

仅将控件设置为未触动是不够的，您需要清除由于Validators.required:

重置时控件中出现的错误

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

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

Getting validation error after successful form submit

angular-reactive-forms

angular-material-7

angular8