Custom validation in angular js

Question

Hi All of the angular developer, I am fetching a validation problem with angular js. I can do the validation under the Form, I can check every validate field by Form in angular js. but i want to do the same job by using Div instead of Form. many people suggested me that you can do by angular directives. but how? They did not clear to me.Here how will i check all validate directives under the Div?. I have not found any solution. Anyone have an idea or solution?. I have given my example below. now i want to validate this by using angular js directives. Thanks

    <div name="userForm" novalidate>

        <!-- NAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
            <label>Name*</label>
            <input type="text" name="name" class="form-control" ng-model="user.name" required>
            <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
        </div>

        <!-- USERNAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
            <label>Username</label>
            <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
            <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
            <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
        </div>

        <!-- EMAIL -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
            <label>Email</label>
            <input type="email" name="email" class="form-control" ng-model="user.email">
            <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
        </div>

        <button type="button" ng-click="Save()" class="btn btn-primary">Submit</button>

    </div>

why would you care about using a form? is just a container you can style it as a div and keep the nice features that using forms in angular gives you — Dayan Moreno Leon
– Dayan Moreno Leon, Commented Jun 8, 2014 at 3:44
Hi, @Khanh TO can you give me a example? this will be very helpful to me. if you send a sample project. thanks for your reply. — Shohel
– Shohel, Commented Jun 8, 2014 at 3:45
Hi, @DayanMorenoLeon I have explained another question. please check my question stackoverflow.com/questions/24014054/… — Shohel
– Shohel, Commented Jun 8, 2014 at 3:48
so you have a problem with nested forms thats exactly what ng-form directive is for docs.angularjs.org/api/ng/directive/ngForm you can validate your child form and then check if the form is valid when validating the parent form as if the child form was another input field — Dayan Moreno Leon
– Dayan Moreno Leon, Commented Jun 8, 2014 at 4:12

Michael Kang · Accepted Answer · 2014-06-08 13:33:27Z

1

Use ng-form:

 <div ng-form="userForm" novalidate>
  ...
 </div>

answered Jun 8, 2014 at 13:33

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alamgir · Accepted Answer · 2014-06-08 05:26:48Z

0

You may follow the instruction below

http://www.breezejs.com/documentation/validation http://www.breezejs.com/breeze-labs/breezedirectivesvalidation

answered Jun 8, 2014 at 5:26

Alamgir

6868 silver badges15 bronze badges

Collectives™ on Stack Overflow

Custom validation in angular js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related