Hi All,
My question is the following. I just recently started using ng-messages to
display errors on my html forms on the site. I have set the ngOptions to
updateOn 'blur' so that errors are only showed when I leave an input. The
only real option I believe is default, but if you put anything other than
default it seems to work when you leave the field.
I have all the logic working fine but when I am done completing the form,
this is when the issue comes up. I have ng-disabled="form_name.$valid".
This means I only want the button to be clickeable when all fields and the
form is valid. The problem is I have to leave my current input field for
the button to be activated. For example, if I am in the last input field
before the submit button and I press tab, the button still will not be
enabled, meaning I have to click in another input field or on the form
somewhere so that my button's state switches to enabled.
I know I can probably use a watch to watch the valid value of the form and
update the button as soon as the form is valid but a good amount of people
will tell you to stay away from watchers. Can someone come up with a
reasonable solution that will not impact performance by not having to use a
watch?
Here's a sample of my login form with out having to create a plunkr or
something similar. At the moment I don't have time to
<form
name="client_login"
class="form-inline"
data-ng-submit="login()"
data-ng-model-options="{ updateOn : 'blur' }"
novalidate
>
<div class="control-group">
<div class="controls controls-row">
<input
class="span6 input-xlarge"
type="text"
name="username"
id="username"
data-ng-model="loginData.username"
placeholder="Username"
required
data-ng-minlength="3"
data-ng-maxlength="16"
pattern="^\w+$"
>
<input
class="span6 input-xlarge"
type="password"
name="password"
id="password"
data-ng-model="loginData.password"
placeholder="Password"
required
data-ng-minlength="8"
data-ng-maxlength="16"
pattern="^\w+$"
>
</div>
<div class="control controls-row display-767-up">
<span
class="span6 text-error control
controls-row blur-input-error my-messages"
data-ng-if="client_login.username.$invalid
&&
(client_login.username.$dirty
|| client_login.username.$touched)"
ng-messages="client_login.username.$error"
>
<span ng-message="required">Username is
required</span>
<span ng-message="pattern">Username must
only contain Alphabet characters</span>
<span ng-message="minlength">Username must
be at least 3 characters</span>
<span ng-message="maxlength">Username must
be a max of 16 characters</span>
</span>
<span
class="offset6 span6 text-error control
controls-row blur-input-error my-messages"
data-ng-if="client_login.password.$invalid
&&
(client_login.password.$dirty
|| client_login.password.$touched)"
ng-messages="client_login.password.$error"
>
<span ng-message="required">Password is
required</span>
<span ng-message="pattern">Password must
only contain Alphabet characters</span>
<span ng-message="minlength">Password must
be at least 8 characters</span>
<span ng-message="maxlength">Password must
be a max of 16 characters</span>
</span>
</div>
<div class="controls controls-row">
<button data-ng-disabled="client_login.$invalid
|| !client_login.$dirty" type="submit" class="btn btn-success
btn-large">Sign in</button>
</div>
</div>
<div>
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
</div>
</form>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
