Topic: Form reset doesnt clear focus
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
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:
But you have to remember, that you have import ReactiveFormsModule in your app module to achieve this situation.
Best Regards,
Damian
<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();
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No