Angular validation for fields to be valid but not required - regex

Question

I have the following in my template:
<div class="form-group">
<label for="work_phone">Work Phone</label>
<input type="text"
class="form-control"
name="workPhone"
ng-class="{'borderRed': contactInformation.workPhone.$invalid && contactInformation.submitted}"
ng-model="controller.contactInformation.workPhone"
ng-pattern="/^\d+$/"
maxlength="10"
id="work_phone">
<small class="error"
ng-show="contactInformation.workPhone.$invalid && !contactInformation.workPhone.$pristine && contactInformation.submitted">
That's not a valid phone number (only numerics are allowed)!
</small>
</div>
Conditions:
1. If the field is blank/untouched, the form should stay valid.
2. If there is any value in the field then it should be validated against the regex provided in ng-pattern.
Looks very trivial. I know. But for some stupid reason, unable to find a solution

Answer 1

So if i understand your problem you want allow only numerics you can use this directive to block every other caracters :
.directive('onlyDigits', function () {
return {
require: 'ngModel',
restrict: 'A',
link: function (scope, element, attr, ctrl) {
function inputValue(val) {
if (val) {
var digits = val.replace(/[^0-9]/g, '');
if (digits !== val) {
ctrl.$setViewValue(digits);
ctrl.$render();
}
return parseInt(digits,10);
}
return undefined;
}
ctrl.$parsers.push(inputValue);
}
};
});
And add the directive to your input, it's faster and you haven't to use ng-pattern :
<input type="text"
class="form-control"
name="workPhone"
maxlength="10"
id="work_phone" onlyDigits>

Answer 2

Your form currently stays valid to begin, because you're checking for $pristine. Try using $setPristine() when the form is empty to reset it, so no longer gets the error class.

Answer 3

You may change your regex so that it allows empty strings:
ng-pattern="/^\d*$/"