Is there any way to validate an input in Angularjs without using form?

Question

I have a input which I wish to validate via Angularjs. However, this input is not within a form. So, when trying to access the form validation information, I was unsuccessful:

<div class="form-group">
    <input name="nick" type="text" class="form-control" ng-model="username.nick" ng-maxlength="10">
    <span class="help-block" ng-show="nick.$error.maxlength">Máximo permitido é 10</span>
</div>

But if I do it that way, it works:

<form name="formUser">
    <div class="form-group">
        <input name="nick" type="text" class="form-control" ng-model="username.nick" ng-maxlength="10">
        <span class="help-block" ng-show="formUser.nick.$error.maxlength">Máximo permitido é 10</span>
    </div>
</form>

In this specific case, I would like to use the validation similar to the second example, but without form.

Is there any way to validate the angular, without using the form?

Answer 1

What you can do is use the directive ng-form. This way, it could stay like this:

<div class="form-group" ng-form="nick">
    <input name="nick" type="text" class="form-control" ng-model="username.nick" ng-maxlength="10">
    <span class="help-block" ng-show="nick.$error.maxlength">Máximo permitido é 10</span>
</div>

This Directive has all the capabilities of the form with name, however it is more used in sub groups. I’ve seen a lot in form Wizard that has several Steps (steps). So instead of using multiple forms, they use the ng-form in stages requiring validation.

Example