Prevent Form Submit if Phone Number is Invalid - Angularjs - angularjs

Question

I am wanting to prevent form submission if the phone input is invalid per my ng-pattern WITHOUT using disabled on the button. I have tried adding logic to my submitForm function to no avail. Something along the lines of...
Adding a validation function to my angular code:
const validPhone = function (phone) {
var re = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
return re.test(phone);
}
And adding some logic to my submit function like...
if (!this.validPhone(main.contact.phone)) {
$window.alert("Please a valid phone number!");
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
(function () {
"use strict";
angular.module("rzApp", []).controller("MainCtrl", MainCtrl); // as main.
function MainCtrl($document, $timeout, $window) {
var main = this;
main.now = new Date();
main.contact = {
phone: "##phone##",
company: "##company##"
};
main.submitForm = _submitForm;
function _submitForm() {
if (!main.contact.phone) {
$window.alert("Please enter your phone number!");
return false;
}
if (!main.contact.company) {
$window.alert("Please enter your company!");
return false;
}
$timeout(function () {
$document[0].forms[0].submit();
}, 0);
}
}
})();
</script>
<form method="post" id="f" novalidate name="mainForm">
<div class="input-field">
<input type="text" placeholder="Phone *" value="##phone##" name="phone"
ng-model="main.contact.phone" required
style="margin-bottom: 0; margin-top: 16px"
ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im" />
<small class="form-text rz-error" ng-show="mainForm.phone.$error.required">This
field is
required.</small>
<small class="form-text rz-error" ng-show="mainForm.phone.$error.pattern">
Doesn't look like a valid phone number!</small>
</div>
<div class="input-field">
<input type="text" placeholder="Company *" name="company"
ng-model="main.contact.company" value="##company##" required
style="margin-bottom: 0; margin-top: 16px" />
<small class="form-text rz-error"
ng-show="mainForm.company.$error.required">This field is
required.</small>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="callback_request"
value="yes" style="margin-bottom: 0; margin-top: 16px" />
<label class="form-check-label" for="flexCheckDefault">
I would like a call & a free audit.
</label>
</div>
<div class="input-field">
<input type="submit" class="button alt" value="Download Now"
ng-click="main.submitForm()" style="margin-bottom: 0; margin-top: 16px" />
</div>
<div style="margin-top: 10px">
<small><em class="text-muted">* Denotes a required field.</em></small>
</div>
</form>

Answer 1

Do something like:
<form (keydown.enter)="validateFunction($event)"></form>
Then put your logic in validate function and do $event.preventDefault() if needed.

Answer 2

I removed the disabled from the button and added logic to check for a valid phone number to my angular.js code:
<script>
(function () {
"use strict";
angular.module("rzApp", []).controller("MainCtrl", MainCtrl); // as main.
function MainCtrl($document, $timeout, $window) {
var main = this;
main.now = new Date();
main.contact = {
phone: "##phone##",
company: "##company##"
};
main.submitForm = _submitForm;
main.validPhone = _validPhone;
function _submitForm() {
if (!main.validPhone(main.contact.phone)) {
$window.alert("Please enter a valid phone number!");
return false;
}
if (!main.contact.company) {
$window.alert("Please enter your company!");
return false;
}
$timeout(function () {
$document[0].forms[0].submit();
}, 0);
}
function _validPhone(phone) {
const re =
/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
return re.test(phone);
}
}
})();
</script>