无法重置包含select的反应窗体

Question

我使用的是angular 6

我的html是

<form [formGroup]="myForm" >
  <label>
    <input type="text" formControlName="name" placeholder="name" required autofocus >
  </label>
  <label>
    <select name="drop" formControlName="drop">
      <option value="developer"selected >developer</option>
      <option value="designer">designer</option>
      <option value="admin">admin</option>
    </select>
  </label>
</form>

即使我在页面第一次加载时在"developer“option中设置了selected，"developer”也没有被选中。我猜这是angular的一个小bug，它不能正确呈现html，所以我在定义表单时放入了我的组件：

  myForm = this.formBuilder.group({
    name:['',Validators.required],
    drop:['developer']
  });

而且它是有效的。

真正奇怪的是，当我在表单外的另一个按钮内执行this.myForm.reset();时，"name“是空的，但下拉菜单也是完全空的，只是空白，但它应该显示"developer"，对吧？

该按钮隐藏了一些元素，并且应该重置表单，它位于表单之外

  getOtherData(id){
    this.myForm.reset();

这不起作用，所以我必须这样做

this.myForm.setValue({
  name: '',
  drop: 'developer'
});

为了实际重置表单。与reset结合使用的select出了什么问题？我想使用一次reset并完全重置表单，没有“hack”我怎么做呢？

谢谢

Answer 1

真正奇怪的是，当我在表单外的另一个按钮内执行this.myForm.reset()时，"name"应该是空的，但是dropdown也是完全空的，只是空白，但它应该显示"developer"，对吧？

不，它不应该。当我们调用reset()时会发生什么？最重要的是，it 将你所有的值设置为 null.。

在您的select中，您想要选择的字段具有值"developer"，因此该值当然不会被设置，因为您刚刚将该值重置为null，即

null === 'developer' // false!  

这是一个Angular表单，因此Angular实际上并不关心HTML属性(在本例中是selected)，而是监听表单控件以及那里发生的事情。因此，您需要做的是用您想要的值重置表单，因为您可以在reset上给出值

this.myForm.reset({
  name: '',
  drop: 'developer'
});

Answer 2

你应该使用patch方法来重置表单

更新所有FormControl值的setValue()方法。

patchValue()方法还将从模型中设置FormControl值，但仅限于我们在模型中提到的那些值。

this.myForm.patchValue({
  name: ''
});

如果要对特定FormControl值使用reset方法

  this.myForm.get('name').reset(); 

示例：https://stackblitz.com/edit/patch-with-form

Answer 3

您可以同时使用reset方法和传值，如下所示。注意:如果要验证对象，请始终与null进行比较。

 this.form.reset({
    name: '',
    drop: [null]
  });

FormGroup