如何仅重置角度5中的特定表单字段
Posted
技术标签:
【中文标题】如何仅重置角度5中的特定表单字段【英文标题】:How to reset only specific fields of form in angular 5 【发布时间】:2018-10-16 06:21:18 【问题描述】:我在我的一个组件文件中创建了一个函数来重置表单(myform):
`onSubmit()
if (this.myform.valid)
console.log("Form Submitted!");
this.myform.reset();
`
重置整个表单效果很好,但是否可以只重置一些元素并保持其他元素相同。
【问题讨论】:
【参考方案1】:试试这个:
this.myform.controls['comments'].reset()
【讨论】:
如何添加多个字段?说this.myform.controls['comments', 'name'].reset()
我在文档中找不到这种方法。
@Keithers 试试这个:this.myform.reset( cmets: null, name: null)
@Abdessamad 试过但没用,我不得不为不同的控件名称复制两次代码this.myform.controls['comments'].reset(), this.myform.controls['name'].reset()
我花了很长时间才找到这个,谢谢,我认为这是最干净的解决方案。【参考方案2】:
试试这个:
clearForm()
this.myForm.get('comments').reset();
this.myForm.get('name').reset();
并在您提交表单的地方调用此函数。
【讨论】:
【参考方案3】:是的,您可以使用 this.myform.controls
访问控件
获取控件并调用reset()
【讨论】:
我的一个控件名称是comments
,所以我写了this.myform.controls.comments.reset()
。但我收到错误“未解析的变量 cmets”【参考方案4】:
更新:
我刚遇到这个问题,虽然接受的答案有效,但它有一些 tslint 警告。我最终做了:
this.myForm.get('formControlName').setValue(null);
我正在使用 Angular 8。
如果您想为多个领域执行此操作,也可以:
private controlNames = ['nameOne', 'nameTwo'];
this.controlNames.map((value: string) => this.myForm.get(value).setValue(null));
【讨论】:
【参考方案5】:在你的 html 中
<select formControlName="idSala" (change)="clearField(1)">
<option value="">Selecione uma sala</option>
</select>
<input type="text" formControlName="titulo">
<input formControlName="dataHoraInicial" type="datetime-local">
TS
clearField(value)
if (value == 1)
this.formularioDeAgendamentoSala.controls['titulo'].reset();
this.formularioDeAgendamentoSala.controls['dataHoraInicial'].reset();
【讨论】:
【参考方案6】:动态删除FormControl值:
private _clearFormGroupControlValue(formControlName: string)
this.formGroup.get(formControlName).setValue(null);
or
private _clearFormGroupControlValue(formControlName: string)
this.formGroup.controls[formControlName].reset();
or
private _clearFormGroupControlValue(formControlName: string)
this.formGroup.controls[formControlName].patchValue(null || '');
【讨论】:
以上是关于如何仅重置角度5中的特定表单字段的主要内容,如果未能解决你的问题,请参考以下文章
如何创建仅允许访问 C++ 中的特定用户帐户的手动重置事件?
在角度 5 中过滤 Angular Material 表中的特定列 [重复]