I've implemented the following Angular form and I want to clear the text field after submitting the form.
<form #addcheckinform="ngForm" novalidate (ngSubmit)="addcheckinform.form.valid && saveScheduleCheckin(this.checkin)">
<div class="form-group row">
<label for="email5" class="col-sm-3 col-md-3 col-form-label">Contact
No.</label>
<div class="col-sm-9 col-md-9">
<input type="text" name="contactno" #contactno="ngModel" class="form-control" required
[ngClass]="{'is-invalid':addcheckinform.submitted && contactno.invalid}" placeholder="Contact No." [(ngModel)]="checkin.contactno" />
</div>
</div>
<button type="submit" class="btn btn-action btn-flat float-right"
[disabled]="!addcheckinform.form.valid">
<i class="fas fa-paper-plane"></i> <span> Submit</span>
</button>
</form>
The code snippet above is from my component.ts file
@ViewChild(NgForm) addcheckinform: NgForm;
saveScheduleCheckin(a){
this.resetForm();
}
resetForm() {
this.addcheckinform.reset();
}
When I console log this.addcheckinform
, it returns as undefined
. How can I correctly reset my form in this case?