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

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>

即使我在第一次加载页面时在“开发者”option 中设置了selected，但没有选择“开发者”。我猜这是一个角度的小错误，无法正确呈现 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 并完全重置表单，没有“黑客”我该怎么做？

谢谢

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

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

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

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

null === 'developer' // false!  

这是一个 Angular 表单，所以 Angular 并不关心 HTML 属性（在本例中为 selected），但会监听表单控件以及那里发生的事情。所以你需要做的是用你想要的值重置表单，因为你可以在reset上给出值：

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