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.
Related
I'm currently maintaining an AngularJS application and need to have html inputs use the ngRequired directive. However these inputs do not use ngModel-- just straight up value to display the value dynamically and ngClick to popup a modal window that will eventually set the value in an object that is not bounded to a model. Seems like ngRequired only works when paired with ngModel in order for the submit button to reflect changes appropriately (like enable/disable).
I tried to work around not using ngRequired by manipulating the ngInvalid CSS which works great for showing the required fields-- however it does not bubble up to the submit button (disabling it if one or more required fields have no input). Is there a way to emulate ngRequired without using it explicitly in AngularJS?
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 am new to angularjs.
It seems out of the box angularjs shows validation feedback in bubbles in realtime.
I've managed to find a way to show the errors on defocus.
Is there a way, however, to only present the feedback on a div at the top of my form instead of in bubbles?
The bubbles you see are HTML5 standard bubbles.
To valid entirely your form yourself, you'll have add a novalidate property on your form and handle the form validation through an ng-submit form custom function.
More info : http://docs.angularjs.org/api/ng/directive/ngSubmit
and http://docs.angularjs.org/guide/forms for custom form validation
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.
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.