angular - 无法重置包含选择的 react 形式

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 小错误，无法正确呈现 html，所以我在定义表单时放入我的组件:

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

并且有效。

真正奇怪的是，当我在另一个按钮内执行 this.myForm.reset(); 时，放置在表单之外，“名称”应该是空的，但是下拉列表也完全是空的，只是空白，但它应该显示“开发人员”，对吧？

那个按钮隐藏了一些元素并且应该重置表单，它在表单之外而且确实如此

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

这行不通，所以我必须这样做

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

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

谢谢

Answer 1

What is really weird is that when I do this.myForm.reset(); inside another button, placed outside the form, the "name" is empty as it should be, but the dropdown is also completely empty, just blank, but it should show "developer", right?

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

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

null === 'developer' // false!  

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

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