I have a form that is divided into tabs. Each tab is an ng-form that is a children of the main form element. The parent form should only be able to submit if the other subforms are valid. However, because I am using ng-switch, it only checks if the current tab is valid.
Here is the fiddle http://jsfiddle.net/nicolasmoise/LRfrY/2/
Is my approach correct? Should try an alternative to ng-switch or can I have all that logic inside the controller/services?
BONUS
When the parent forms submits, it should open the first tab/ng-form that isn't valid in order to immediately show the user the error. (e.g. if tab1 and tab2 are valid it will jump to tab3 and show the error there.
The ng-switch does not hide, it adds/removes elements, that match, to/from the DOM. This way the DOM does not have access to the removed fields so the validation cannot work for the hidden elements.
You could either handle the validation on the controller by checking if all your models have values, or you could just show/hide the elements instead of adding/removing them.
So, remove the ng-switch and use ng-show="tab==1" and ng-show="tab==2" on the ng-form elements.
Demo at http://jsfiddle.net/gaby/LRfrY/4/
Related
I have a dropdown element directive to display in essence a styled dropdown list with additional capabilities.
My dropdown controller has a function called openDropdownItems that get's executed when the list should be displayed.
Then I also have another attribute directive called setInViewWhen that provides an expression when the element should be scrolled into view when condition is true.
<x set-in-view-when="something.item === selectedItem">
This is just an example of some X element with my attribute directive applied.
The thing is that I would like my dropdown list items (LIs namely) to have this directive on them so when user navigates over them using a keyboard, it would automatically scroll them in view when they get passed visible viewport. Whether these items are displayed within a scrollable container or as a whole in a list longer than the browser viewport isn't really relevant.
The main idea is for scrolling to follow dropdown list selection. Whether that should scroll the main window.
The problem
I can make my setInViewWhen directive completely independent but that means that I would have to search for the closest scrollable container whenever condition changes on an item. This seems to be quite a bit of processing that I would like to avoid to repeat (I need to traverse the DOM upwards, checking each node's calculated stylesheet property OverflowY + some additional checks.
This basically seems redundant because whenever I get the closest scrolling ancestor all sibling elements with the same directive could reuse the calculation result.
Question 1
How can I share this knowledge between sibling directives? If I was to fire an event I could not know whether receivers are siblings or not without any additional processing.
Question 2
Instead of checking for scrollable container every time when my directive's condition becomes true I could theoretically change dropdown parent's openDropdownItems to first complete it's original execution an then also execute the scrollability check and use the result of it along with my directive's condition.
I can gain access to dropdown's controller in my directive via directive requires property and adjust it in the post-link phase.
But this also means that I couldn't use my directive outside of dropdown which I would like to as it is a generally usable directive I could attach on several elements in my app to scroll elements into view under certain conditions.
What would you suggest how to do this?
To sum up the comments:
For Question 1, there is no direct way for sibling directives to communicate with each other. I usually create a wrapper parent directive to relay the messages.
As per the comments, the condition something.item === selectedItem introduces a watch; for a list of select items this can be many watches and detrimental to performance. Even if it doesn't occur now, it is a trap and someone may be lured into using this for a long list of items in the future. I would rather have a single watch in the parent of the <li>s and add the "scroll into view" logic there.
With the previous point in mind, you could still have a standalone setInViewWhen directive (seems useful) and have the controller of your X-select replacement directive share code with it. E.g.:
a service containing the common functionality,
an angular value containing a base class (Typescript or JS) and have the controller of both the setInViewWhen and X directives extend from it
or any other solution that is convenient for your case
Related to Question 2: The children could require their parent and change a method in it (this technique is even endorsed by Angular, see ng-model and custom controls where they override ngModel.$render() by replacing it). If you do that however, there would be many children changing the method of the parent, which could lead to a mess.
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
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
Use ng-required="showUser2" instead of just required.
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.
To check the validity of a form in my page, I test this property in my controller's scope:
$scope.formName.$valid
The problem is that when I add forms dynamically to the page (based on a model property), the $scope.newFormName property is not added to the scope.
This plnkr illustrate the problem
Click the 'Add form' button to add forms to the page
Click the 'Search forms' to update the list with the forms found in the $scope
Note that the added forms are not found in the scope
Is there any way to make this work? How can I check the validity of this dynamically added forms?
So your code adds a list of identical forms. And you want to see whether this list is valid or not.
The solution is to use ngForms within a parent form. See this Plunkr (my modified version of yours).
Form input values are bound to objects in the $scope.dynamicData array, which also is used by ngRepeat to create the list of forms.
Invalid fields are shown with a solid red border, and invalid forms have a dashed red border.
When forms are nested like this, the parent form is invalid when any of its child forms are invalid.
I'd use angular.element(). I would also personally get it via ID rather than name, but that is just me. View this plunker to see what I did: http://plnkr.co/edit/b87HJt
I'm using angular.element() to get the element by the name, getElementsByName and then using the $attr directive to get at the name.
I can use ng-required to evaluate whether a field is required. Can I specify whether an entire sub-form is required?
For example, I have three radio buttons and each opens up a different sub form. But only the selected sub-form is required. The other two can be ignored.
If you only need to show\submit one form, use ng-switch or ng-if to stop emitting of DOM for other form.
ng-if is part of Angular version 1.1.5
How does one disable the complete form (all input elements within it), while it's being submitted via AJAX? I've tried setting a $scope.form_state variable in the controller and binding it to the submit button's ng-disabled attribute, but it seems like a workaround. There should be an easier + straight-forward way of doing this.
You can put all form elements into fieldset and use ng-disabled to disable the whole fieldset.