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
Related
So if I have one dropdown with 4 entries in it and the user selects the second option in the dropdown which then triggers another dropdown or input using ng-show, how can I append an an ng-required now on that dropdown/input using pure angular? Had thought combining ng-if and ng-required, but cannot understand if that will work. Suggestions please?
Thanks much.
You can use the ng-required directive on the second input field with an expression. If the Boolean expression returns true, The field will become mandatory, otherwise not.
ng-required="your-expression"
If you want to make it mandatory always, Then you just add required attribute on the field.
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.
I'm required to populate my bootstrap powered left navigation based on permissions stored in database.
Permission based menu data set will be fed from web api
So i tried to extend http://jsfiddle.net/kmussel/evXFZ/ directives to change my static menu to dynamic menu .
Everything goes well except collapse functionality is not working as expressions for dynamic ids for data-target is not evaluated somehow.
I have created http://jsfiddle.net/jaimini/gKnJ2/1/ ti mimic the issue I'm facing.
data-target="{{node.id}}"
is not evaluated and hence expand/collapse is not working.
I have also added hardcoded IDs in 2nd menu to show that my approach will work if the expression is evaluated as required.
Manage to solve the issue by removing target attribute from parent link.
updated the fiddle and now its working as per my need.
please note that for proper functioning of bootstrap collapse plugin
data-target="{{\'#navigation\'+node.id}}"
would be required.
This jsfiddle is like yours, it use recursive ng-repeat. The googgle discussion about rendering tree like structure is here.
The different between ng-if ng-switch to ng-show ng-hide is, ng-if will not render the html
if the condition not met rather than render those elements that is hidden but taking up
resources. It is not evident for menus because there are not alot of binding/watches use. But
imagine you have render 5 - 6 tabs with lots of form data.
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/
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.