ngModelOptions*
On Saturday, January 24, 2015 at 10:30:46 PM UTC-5, Billy Figueroa wrote:
>
> 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.
