We need to consider a few factors before submitting a form:
- Is the form valid?
- Is there a handler for the form prior to submission?
To make sure that the form is valid, we can disable the Submit button:
<form #flightForm="ngForm"> <div class="form-group" style="margin-top: 15px"> <button class="btn btn-primary btn-block" [disabled]="!flightForm.form.valid"> Submit </button> </div></form>
First, we add a template variable called flightForm to the form and then use the variable to check whether the form is valid. If the form is invalid, we disable the button from being clicked:
To handle the submission, add an ngSubmit event ...