Question

我正在构建一个角度4应用程序。我有表格女巫包括一个选择元素在框

<div class="form-group">
   <label for="designation">Designation</label>
   <select [class.red-border]="registerUser.controls.designation.invalid && registerUser.controls.designation.touched" formControlName="designation" class="form-control">
      <option   value="">Select</option>
      <option *ngFor="let designation of designations"  value="{{designation}}">{{designation}}</option>
   </select>
</div>

我想在用户成功提交表单后重置我的表单。但是此选择框无法正确重置。一旦我重置表单，它就变空了。下面是我的代码

component.ts formgroup

 registerUser = this.fb.group({
     name: new FormControl('', Validators.required),
     email: new FormControl('', [ 
            Validators.required,
            Validators.email,
            this.emailDomainValidator
        ]),
     emailp: new FormControl('',Validators.email),
     designation:new FormControl('', Validators.required),
     empType:new FormControl('', Validators.required),
     mobileNo:new FormControl('', [Validators.required]),   

  });

我如何重置表单

submit_user = ():void=>{
     if(this.registerUser.valid){
           console.log("register user form submited")
           this.registerUser.reset();
       }
  }

为什么它变空而不是回到选择

Answer 1

this.registerUser.reset({
    designation: ""
});

https://angular.io/api/forms/AbstractControlDirective#reset

有趣的是，因为“值设置为null”。将选项值设置为null也有效：

<select>
    <option value="null">Select</option>
    <option>Option 1</option>
</select>

stackblitz

选择元素无法正确重置

1 个答案: