Exploring Angular/Typescript as a newcomer with the use of Template-Driven forms in Angular 10. Attempting to reset the form without submitting it or relying on button clicks. Despite researching similar issues, they all entail submitting the form for a reset, resulting in the following error:
ERROR TypeError: Cannot read property 'reset' of undefined
The TS file code looks like this:
@ViewChild('visitorForm', { static: true }) visitorForm: NgForm;
constructor(private myService: MyService)
{
this.myService.imagePosted.subscribe(
userDetails => {
this.userDetails = userDetails;
this.visitorForm.reset();
}
);
}
Here is the component.html code snippet:
<form (ngSubmit)="onSubmit(visitorForm)" #visitorForm="ngForm">
<div class="row">
<div class="col-md-10 form-group">
<input
[ngModel]="visitor.firstName"
required
type="text"
id="firstName"
name="firstName"
placeholder="First Name"
class="form-control"
#firstName="ngModel">
</div>
</div>
</form>
I have successfully managed to clear the form upon submit or using a button with an event binding, but that's not the desired outcome. Seeking a solution to reset the form within the subscribe function above. Any insights on how to achieve this?