作者：ayo | 来源：互联网 | 2023-02-04 21:38
以角度反应形式.成功提交后如何仅重置表单状态？
这是过程:
setValue从服务结果创建表单
修改值并提交表单
如果表单已正确提交到服务,则重置并保留值
如何将值保持为已修改并将表单重置为其原始状态.
form.reset()只是清空表单.但是,如果我不调用它,状态不会被重置,例如我的验证取决于表单状态类(原始,脏,有效等)仍然存在.
1> BlackHoleGal..：
@smnbbrv的解决方案效果很好.
您还可以将实际表单值提供给reset()方法.
鉴于事实myReactiveForm是组件中的Reactive表单.成功提交表单后(例如通过调用服务),您可以执行以下操作:
this.myReactiveForm.reset(this.myReactiveForm.value);
它将重置表单并将"新"表单值设置为您所形成的相同值.
这个方法可以在Tour of Hero示例官方Angular.io doc中看到
尝试过，此解决方案不起作用。因为反应式表单立即从输入字段接收最新值，所以传递给“重置”方法的“ this.myReactiveForm.value”不会反映表单的先前状态，而是表单上的最新值。因此，这种复位方式导致无操作。此解决方案下的表单保持不变，而不是按预期方式还原/重置为先前状态。
2> smnbbrv..：
这很简单:
this.form.markAsPristine();
this.form.markAsUntouched();
这将重置表单元数据,表单再次保持原始状态
3> Simon_Weaver..：
对角钢/材料用户的警告2
如果您使用角度材质控件mat-error来显示错误，则会增加复杂性。根据ErrorStateMatcher（除*ngIf您可能已应用的结果之外）的结果显示此类错误。
该默认ErrorStateMatcher显示错误，如果符合下列条件：
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean
{
return !!(control && control.invalid && (control.touched || (form && form.submitted)));
}
所以，这是什么说的是，如果表单已不断被提交和控制变得无效（每个验证规则），那么将显示错误。这通常不是您想要的（特别是如果您正在阅读此问题！）。
查看源代码- submitted = false除非您调用resetFormngForm指令（而不是FormGroup对象），否则无法进行设置。将状态设置为原始状态或未更改状态不会重置为false。
如果您使用的是问题mat-error，可能会发现为自定义逻辑创建自己的ErrorStateMatcher（简单接口）会更容易。
还要注意，ErrorStateMatcher仅采用角材料-而不是标准角形式的一部分。
京公网安备 11010802041100号