Form reset doesnt clear focus


Topic: Form reset doesnt clear focus

Mugetsu asked 2 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 2 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.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No