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.
Related
I want to apply empty values validation on my page, but the question is if there are any other ways rather than using form tag or using ng-form directive?
I think you cannot without Form tag or ng-form directive(AngularJS) to achieve empty validation. Under Form section only we can able to get
$error
$required
predefined tags will be available.
Hey I was wondering if we're able to create a directive in AngularJS that inherit from form element (with $valid properties) and where we are able to rewrite ng-submit behavior ?
You certainly ask why, because I need to check when user submit forms if he forgot some inputs in order to display feedback UI elements.
Thanks.
I would like to use the angular x-editable directive to work with a text field per the following
(a) I don't want to display buttons. I tried the buttons=no option but it does not seem to work with input of type text.
See the fiddle here.
(b) I want the underlying ng-model property to update immediately with each keystroke , without waiting for the user to focus out of the input. (as is default behavior with vanilla angular, eg. <input type=text ng-model="somepropertyname" />
How can one achieve (a) and (b) with angular x-editable? link to fiddle
Answer to 1(a) is to add the blur="submit" attribute (in addition to buttons="no")
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.