Custom form validation using AngularJS

[Sri Harsha Kandrakota]

Hi all,

I am trying to use AngularJS to validating a form. The form will be spanned across multiple pages and i want to validate each page before the user moves onto the next. 

This was pretty straight forward. However, each page can contain multiple tabs and i am not sure how to switch-on and switch-off validation for specific tabs.

As you can see in the fiddle below, '#page1' has 'individual' and 'company'. User can select only one of these 2 and as per that choice, i have to disable the validation on other tab. Adding the 'ng-disabled' attribute dynamically using jQuery is not working.

How can i achieve that? Any help is appreciated.

http://jsbin.com/ijuhos/5/edit

[Peter Bacon Darwin]

How about keep each tab in its own form and write some business login in a controller to check the validity of the different forms (tabs) based on the page 1 choice?

Pete

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[Sri Harsha Kandrakota]

Thanks for the idea Peter but i can't get my head around the multiple forms. If there was only one page, that idea seems feasible but i have 3 pages and each pages have multiple tabs. I added some additional info in the below link. 

http://jsbin.com/ijuhos/9/edit

This is the screenshot of the form i am trying to implement using angular

http://awesomescreenshot.com/05cltpb2a

Can i add some placeholders for each tab and load content into them when the tab is selected using ng-include? Will the validation work for the dynamically added content?

[ganaraj p r]

Hi Harsha,

Remove JQuery from your project (for now)... You are still thinking of this the jquery way instead of the angular way. 

The one rule you will have to get is to never ever use JQuery( aka dom manipulation ! ) in your controllers. NEVER.

Here is how you should think about it alternately.

For example switching between individual and company should be done using an ng-show or ng-switch. Read about them.

Set a single model with both the individual and company radio's so that they both edit the value of the same model.

Now you can start switching / showing the form below based on this model.

Something like 

<input type="radio" ng-model="businessType" value="individual">

<input type="radio" ng-model="businessType" value="company">

Now both these radio's push to the same model.

Later on in the form

<!-- this is for individual-->

<div ng-show="businessType=='individual'>

</div>

<!-- this is for company-->

<div ng-hide="businessType=='individual'>

</div>

Hope this gives you a good starting point. 

PS : Dont take my html for granted. It might have some errors as I typed directly into the mail. 

--
Regards,
Ganaraj P R

[Sri Harsha Kandrakota]

Hi Ganaraj,

Thanks for the advise. Using the ng-show, i was able to display the required field without using any jQuery. However, the issue of disabling validation on form fields based on user choice still exists. If the user types in something in an input field under 'individual' and then decides to navigate away to the 'company' tab, i want to disable the validation for fields under 'individual' tab. So, its like i need a function to reset the validation state on these fields back to 'pristine'. Any guidance is very appreciated.

[ganaraj p r]

How about treating them as two different forms? 

That way you can only check for validity of the form you are submitting and ignore the other one?

[Sri Harsha Kandrakota]

Hi Ganaraj,

I don't think the multiple forms method will work here. As i mentioned before, There are many more fields in each tab, there are many tabs in each page and there are multiple pages. This is a pretty big form and that is the reason i am trying to handle it using Angular.

Anyway, i had some progress using the ng-show and i added a few expressions to the ng-disabled directive to disable fields in hidden tabs. Only one issue remaining. 

To make things clear, say i have 'Tab-A' and 'Tab-B'. 

1. 'Tab-A' is default. (Hide 'Tab-B' using ng-show)

2. User clicks on a field, angular changes form state to invalid

3. User decides to navigate to 'Tab-B'. ('ng-disable' returns true for 'Tab-A')

4. Fields in 'Tab-A' are disabled BUT still retain their invalid state.

5. Form retains its invalid state because of the above.

How do i 'reset' the validation state for the disabled fields. I am pretty sure there must be a way, i just can't figure it.

[Ivo Reis]

Hi Sri, 

One question, you enabling the user changing from one tab to another whilst existing invalid fields in the previous tab is a requirement? 

Maybe you should enable the controls to change tabs after all fields are valid in the first tab.

Also you could get some useful information in here http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController#$setValidity about how to set custom validations.

[Sri Harsha Kandrakota]

Hi Ivo, Thanks for the response. My requirement might seem a bit strange so explaining it further.

Lets take this scenario as an example.

1. A user opens the form.

2. He starts to fill in the fields under the tab 'Individual'. 

3. Then he realizes that he is under the wrong tab and so clicks on the 'company' tab.

4. As per the business rules, a user can only either be an individual or a company but not both.

5. So, now i have to switch-off the validation in the 'individual' tab and discard all the invalid fields in the 'individual' tab.

This is where i can't seem to get my head around. Angular is remembering the invalid state for these fields and applying it to the whole form.

I also tried using 'ng-include' to add and remove fields based on the active tab but still the form holds the invalid state.

[Sri Harsha Kandrakota]

Hi Jitendra,

I didn't find any satisfactory solution for my issue. I just dropped AngularJS and went back to jQuery. Sorry, I couldn't be of much help to you.

On Tue, May 21, 2013 at 9:57 PM, jitubaba10 <vishnoi....@gmail.com> wrote:

Hi Sri,

Did you get any solution for the problem. Actually I am also stuck in same kind of problem.\

Appreciate all your support.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/93YMhl85-vU/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

---------------

Thank You,

Sri Harsha | 0430635535