How to reset only specific fields of form in angular 5

Question

I have created a function in one of my component file that resets the form(myform):

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

It works perfectly fine resetting the whole form, but is it possible to just reset some of the elements and keeping other the same way.

score 49 · Accepted Answer · answered May 06 '18 at 14:58

49

try this:

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

answered May 06 '18 at 14:58

B.Nbl

556
1
5
7

How can you add multiple fields to this? say `this.myform.controls['comments', 'name'].reset()` I can't find this way of doing it in the documentation. – Keithers Jan 17 '19 at 22:04
@Keithers try this : this.myform.reset({ comments: null, name: null}) – Abdes Feb 10 '19 at 21:56
@Abdessamad tried it but did not work, I had to replicate the code twice for the different control names `this.myform.controls['comments'].reset(), this.myform.controls['name'].reset()` – Onen simon Apr 30 '19 at 14:21
It took me way to long to find this, thanks I think this is the cleanest solution. – Dave Collier Mar 11 '20 at 17:01

score 17 · Answer 2 · answered Jun 13 '19 at 09:57

17

try this one:

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

and call this function where you submit form.

answered Jun 13 '19 at 09:57

Cucer Denis

171
1
4

Nadia Bastidas · Answer 3 · 2020-06-04T15:30:19.123

3

UPDATE:

I just had this issue and although the accepted answer works, it has some tslint warnings. I ended up doing:

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

I'm working with Angular 8.

And if you want to do it for several fields this works too:

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

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

edited Jun 04 '20 at 15:30

answered May 22 '20 at 20:52

Nadia Bastidas

66
7

Why `map` to make side effects and ignore the results? – ChiefTwoPencils Jun 07 '23 at 01:33
1

you are totally right, you could use forEach instead! – Nadia Bastidas Jun 16 '23 at 20:11

Mohammad Waleed · Answer 4 · 2020-05-16T21:47:26.887

2

Yes you can access the controls using this.myform.controls get the control and call reset() on it

edited May 16 '20 at 21:47

answered May 06 '18 at 07:43

Mohammad Waleed

195
9

one of my controls name is `comments` so i wrote `this.myform.controls.comments.reset()`. But i get error 'Unresolved variable comments' – Atul Stha May 06 '18 at 07:58

score 2 · Answer 5 · answered Jun 17 '20 at 19:27

In your 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();
}

}

score 1 · Answer 6 · answered Nov 16 '21 at 02:20

Dynamically deletion of FormControl value:

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

How to reset only specific fields of form in angular 5

6 Answers6

Linked