如何仅以角度5重置表单的特定字段

时间:2018-05-06 07:40:53

标签: angular forms angular5 angular-components

我在我的一个组件文件中创建了一个函数,它重置了表单(myform):

`onSubmit() {
  if (this.myform.valid) {
    console.log("Form Submitted!");
    this.myform.reset();
  }
}`

它可以很好地重置整个表单,但是可以重置一些元素并保持其他元素相同。

5 个答案:

答案 0 :(得分:10)

试试这个:

this.myform.controls['comments'].reset()

答案 1 :(得分:2)

更新:

我只是遇到了这个问题,尽管可接受的答案有效,但它还是有一些警告。我最终做了:

this.myForm.get('formControlName').setValue(null);

我正在使用Angular 8。

如果要在多个字段中执行此操作,也可以:

private controlNames = ['nameOne', 'nameTwo'];

this.controlNames.map((value: string) => this.myForm.get(value).setValue(null));

答案 2 :(得分:1)

是的,您可以使用tnis.myform.controls访问控件 获取控件并在其上调用reset()

答案 3 :(得分:1)

尝试这个:

  clearForm() {
    this.myForm.get('comments').reset();
    this.myForm.get('name').reset();
  }

并在提交表单的地方调用此函数。

答案 4 :(得分:0)

在您的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();
}

}