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();内执行操作时，“名称”应为空，但是下拉列表也完全为空，只是空白，但是应该显示“开发人员”，对吗？

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

  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'
});

Answer 2

您应该使用补丁方法重置表格

setValue（）方法可更新所有FormControl值。

patchValue（）方法还将设置模型中的Formcontrol值，但仅适用于我们在模型中提到的那些值。

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

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

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

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

Answer 3

您可以同时使用重置方法和传递值

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

FormGroup

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

3 个答案: