选择元素未正确重置答案

【问题标题】：Select elements does not reset properly选择元素未正确重置
【发布时间】：2018-01-05 05:36:40
【问题描述】：

我正在构建一个 Angular 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 表单组

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

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

【问题讨论】：

“为什么它变空而不是返回选择”是什么意思？当前正在发生什么，您想要什么输出？

标签： javascript angular forms

【解决方案1】：

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

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

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

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

stackblitz

【讨论】：