I'm trying to do a required field validation in ionic / angularjs and it doesn't seem to be triggering {{user.$invalid}} is not being set when I interact with the form. New to angular and ionic, so what is the right way of doing required field validators in this case.
<form novalidate >
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="user.uname" required>
<div class="error-container" ng-show="user.uname.$dirty && user.uname.$invalid">
<small class="error" ng-show="user.uname.$error.required">Please input a uname</small>
</div>
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="user.pwd" required>
<div class="error-container" ng-show="user.pwd.$dirty && user.pwd.$invalid">
<small class="error" ng-show="user.pwd.$error.required">Please input a password</small>
</div>
</label>
<label class="item">
<div lass="error-container">{{message}}</div>
<div lass="error-container">Invalid:{{user.$invalid}}</div>
<button class="button button-block button-positive" ng-disabled="user.$invalid" ng-click="login(user)">Log in</button>
</label>
</div>
</form>
Looks like you just forgot to name your form:
<form novalidate name="user">
Angular will only create $scope members for named forms and inputs.
From the docs https://docs.angularjs.org/guide/forms:
A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.
Similarly, an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control. The name attribute specifies the name of the property on the form instance.