Topic: Form reset doesnt clear focus

Mugetsu free asked 6 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);
}```

Damian Gemza staff answered 6 years ago


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

Please insert min. 20 characters.

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
Tags