无法重置包含选择的反应形式

Question

我正在使用角度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>

即使我selected在option页面首次加载时在“开发人员”中进行设置，也未选择“开发人员”。我想这是一个小角度的错误，无法正确呈现html，因此我在定义表单时放入了组件：

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

而且有效。

真正奇怪的是，当我this.myForm.reset();在另一个位于窗体外部的按钮内执行操作时，“名称”应为空，但下拉列表也完全为空，只是空白，但应显示“ developer”，对吗？

该按钮隐藏了一些元素，应该重置表单，它在表单外部并且确实

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

这行不通，所以我必须做

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

为了实际重置表格。这是怎么错的select用组合reset？我想使用reset一次并完全重置表单，而不会出现“ hacks”，该怎么办？

谢谢

Answer 1

真正奇怪的是，当我这样做时this.myForm.reset()；在另一个位于表单外部的按钮中，"name"则应为空，但下拉菜单也完全为空，只是空白，但应显示"developer"，对不对？

不，不应该。我们打电话时会reset()怎样？最重要的是，它将所有值设置为null。

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

null === 'developer' // false!  

这是一个Angular表单，因此Angular确实不在乎HTML属性（在本例中为selected），而是侦听表单控件及其中发生的事情。因此，您需要做的是使用所需的值重置表单，为此您可以在上提供值reset：

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