Form reset doesnt clear focus

Topic: Form reset doesnt clear focus

Mugetsu free asked 7 years ago

Inputs on form group form don't clear to initial state after calling from.reset(); I have to call focus and blur manually on every item after resetting form.. ```

clearInputs() {
  const inputs = document.getElementsByTagName('input');
  const textAreas = document.getElementsByTagName('textarea');
  const clearBoxes = input => {
    input.focus();
    input.blur();
  };


  forEach(textAreas, clearBoxes);
  forEach(inputs, clearBoxes);
}```

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Dear Mugetsu,

For me, everything is working fine. I've got 3 reactive forms inputs and 1 button with clear method on click.

When I'll put some text into inputs, and click my button, every input returns to his initial state.

Just look at my code:
<div>
<pre><form [formGroup]="form" >

</div>

</div>

</div>

<button class="btn btn-primary waves-light" mdbRippleRadius (click)="clear()">Clear</button>

</form></pre>
</div>
<div></div>
<div>
<div>
<pre>import { Component, OnInit } from '@angular/core';

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

form:FormGroup;

constructor(privatefb:FormBuilder) {

this.form=fb.group({

'input-1': [null, Validators.required],

'input-2': [null, Validators.required],

'input-3': [null, Validators.required]

});

}

clear() {

this.form.reset();

}

}</pre>
</div>
</div>
<div></div>
But you have to remember, that you have import ReactiveFormsModule in your app module to achieve this situation.

Best Regards,

Damian

Please insert min. 20 characters.

Dear Mugetsu, For me, everything is working fine. I've got 3 reactive forms inputs and 1 button with clear method on click. When I'll put some text into inputs, and click my button, every input returns to his initial state. Just look at my code:

<form [formGroup]="form" >

<div class="md-form">

<input id="input-1" formControlName="input-1" type="text" mdbActive>

<label for="input-1">Text here</label>

</div>

<div class="md-form">

<input id="input-2" formControlName="input-2" type="text" mdbActive>

<label for="input-2">Text here</label>

</div>

<div class="md-form">

<input id="input-3" formControlName="input-3" type="text" mdbActive>

<label for="input-3">Text here</label>

</div>

<button class="btn btn-primary waves-light" mdbRippleRadius (click)="clear()">Clear</button>

</form>

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

form:FormGroup;

constructor(privatefb:FormBuilder) {

this.form=fb.group({

'input-1': [null, Validators.required],

'input-2': [null, Validators.required],

'input-3': [null, Validators.required]

});

}

clear() {

this.form.reset();

}

}

But you have to remember, that you have import ReactiveFormsModule in your app module to achieve this situation. Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Mugetsu

2Support score
6Questions 0Answers 0Snippets