I am encountering an issue with angular validation.
My scenario is as follows:
- In a form, I have 2 textfields and 1 button.
- Upon page load, the button is disabled due to the ng-invalid status.
- When some text is entered in a textfield, the button becomes enabled.
- [Issue] However, when all text in a textfield is cleared using the delete key on the keyboard, the button remains disabled.
- This problem occurs when the "required" attribute is not used with the textfield.
I have provided a solution on jsfiddle
<div ng-controller="validationCtrl">
<form name="xyzForm" novalidate>
<input
type="text"
name="name"
ng-model="xname"
ng-class="{'has-error': xyzForm.name.$invalid && !xyzForm.name.$pristine}"
/>
<input
type="number"
name="age"
ng-model="xage"
ng-class="{'has-error': xyzForm.age.$invalid && !xyzForm.age.$pristine && xyzForm.age.$dirty}"
/>
<div>
<button ng-click="submit()" ng-disabled="xyzForm.$invalid || xyzForm.$pristine">Submit</button>
<span>invalid : {{xyzForm.$invalid}}</span>
<span>pristine : {{xyzForm.$pristine}}</span>
</div>
</form>
</div>