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

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，但"开发者"并没有被选中。我想这是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一次并完全重置表单，而不需要"破解"。我该怎么做？

谢谢

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

您应该使用补丁方法重置Form

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

patchValue((方法还将从模型中设置Formcontrol值，但仅针对我们在模型中提到的值。

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

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

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

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

Answer 3

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

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

FormGroup