无法重置包含 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 的一个小错误，它无法正确呈现 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'
});

以便实际重置表格。 select 与 reset 组合有什么问题？我想使用 reset 一次并完全重置表单，没有 "hacks" 我该怎么做？

谢谢

Answer 1

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

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

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

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

如果您想对特定的 FormControl 值使用重置方法

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

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

Answer 2

你可以像这样同时使用reset方法和传值。注意：如果您正在验证对象，请始终与 null 进行比较。

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

FormGroup

Answer 3

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。

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

null === 'developer' // false!

这是一个 Angular 形式，所以 Angular 真的不关心 HTML 属性（在这种情况下 selected），而是听取形式控制以及那里发生了什么。所以你需要做的是用你想要的值重置表单，因为你可以在 reset:

上给出值

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

无法重置包含 select 的反应形式

Cannot reset reactive form that contains a select

forms

angular

angular-reactive-forms

angular6