Dynamic Form Validations in Angular Js

Question

I am Struggle With Dynamic Form Validation In My Current Project, in my Form Having Two Fields like User Name and Email, Both Are Mandatory.

If User Click Add-More(Up to 2 times only) Button Then Same above fields are came. those two fields are also Mandatory. if user removes those fields validation will not be work

I Already Wrote those 2 fields(3 times) just, I Kept ng-hide and ng-show, And My Code is below,

enter code here

I have Added My Code To Plunker: http://plnkr.co/edit/ErJl2Kg8maOn5GLaz9mb?p=preview

HaRdik Kaji · Accepted Answer · 2015-09-15 09:50:50Z

3

Avoid to use ng-hide or ng-show. Prepare on model i.e. JSON Array and bind using ng-repeat and write associated code in JavaScript.

Example: Click here for Example

answered Sep 15, 2015 at 9:50

HaRdik Kaji

4252 silver badges11 bronze badges

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

Comments

Diana R · Accepted Answer · 2015-09-15 09:57:23Z

0

Use ng-required="showUser2" instead of just required.

answered Sep 15, 2015 at 9:57

Diana R

1,1741 gold badge9 silver badges24 bronze badges

7 Comments

kishan kurivella Over a year ago

@HaRdik.. Can You please Guide Me How To Write.. My Above Code Using ng-repeat

HaRdik Kaji Over a year ago

Example: Click here for Example Try this example.

kishan kurivella Over a year ago

@HaRdik.. I follow Example as u mentioned. In My Database there is 3 records. then it comes 3 times. its looks fine. But In Another Situation In My DB There is No records. In This Case, there is nothing to display(including Form also). But I Need those 2 fileds 3 times (if having data or not).. if there is no data. then user will be added to db. if data is there then user may be chance to update the data. please guide me what can i do.

Diana R Over a year ago

check in your controller if the result from post method that return data the list is empty, just push into your list one empty object and you will have the empty form there

Diana R Over a year ago

I would check if response.status == 200 cause the way you have it here, you should send from backend data="fail" which is not ok. But the code you have is the ok. Just make sure you have initialized the $scope.formDataTwo = {} and $scope.formDataTwo.premiumusers = [] somewhere in your controller

|

DanEEStar · Accepted Answer · 2015-09-15 09:58:59Z

0

In an AngularJS-form a field is still required even when its hidden. That means when you hide your required form input field with ng-hide or ng-show then the AngularJS FormController completeProfile still treats the form as $invalid.

To get dynamic forms how you want them you can use ng-if to hide your unwanted input fields. Input fields inside of a ng-if are not considered by the form validation logic.

I updated your Plunker. The submit button is only shown when the form is valid.

answered Sep 15, 2015 at 9:58

DanEEStar

6,3707 gold badges41 silver badges53 bronze badges

Collectives™ on Stack Overflow

Dynamic Form Validations in Angular Js

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related