I have a Reset button with input type = reset. On click of the Reset button, I need all fields to clear first and then I have to execute a method. So I am using a click event but not able to execute both with type reset.
<button type="reset">Reset</button> // Line 1
<button (click)="resetView()" type="button">Reset</button> // Line 2
resetView(){
// Some method
}
The first line is enabling only reset of fields. The second line is only hitting the resetView() method without clearing out the fields. How do I include both the reset and resetView() method
There are 3 ways comes to my mind that form can be handled in angular:
form tag:<form #myForm>
<!-- here some other controls -->
<button (click)="myForm.reset(); resetView()">Reset</button>
</form>
ngModel: <input [(ngModel)]="myInput1"/>
<input [(ngModel)]="myInput2"/>
<!-- here some other controls -->
<button (click)="resetForm(); resetView()">Reset</button>
resetForm(){
this.myInput1 = '';
this.myInput2 = '';
// etc.
}
resetView(){
// Some method
}
FormGroup:<div [formGroup]="myForm">
<input formGroupName="myInput1"/>
<input formGroupName="myInput2"/>
<!-- here some other controls -->
<button (click)="resetForm(); resetView()">Reset</button>
</div>
readonly myForm = new FormGroup({
myInput1: new FormControl(''),
myInput2: new FormControl(''),
// etc.
});
resetForm(){
this.myForm.reset();
}
resetView(){
// Some method
}