AngularJS : form validation not working on hidden input - javascript

I have a form splitted in 4 steps (I made a form "wizard" using ng-switch), the submit button is on the last page of the wizard. I have some troubles making the angular form validation to work . It seems that the formName.$invalid only watches the inputs of the current step of the form.
<form name="carouselForm">
<div ng-switch="modal.getCurrentStep()" class="slide-frame">
<div ng-switch-when="general" class="wave row">
....
</div>
<div ng-switch-when="carousel" class="wave row">
<div class="col-md-12">
<div class="form-group"
ng-class="">
<label for="Title">
Title <span class="red">*</span>
</label>
<div>
<input id="Title"
ng-model="entityData.Title"
type="text"
required
placeholder="" class="form-control input-md">
</div>
</div>
</div>
</div>
<div ng-switch-when="details" class="wave row">
.....
</div>
<div ng-switch-when="description" class="wave row">
.....
</div>
</div>
</form>
I removed most of the form cause it would have been very long. In step two I left an input with the required tag. On this step the carouselForm.$invalid is properly set to true if this field is not set, but as soon as I change to the next step, carouselForm.$invalid is false again even if I didn't filled the required input.
It seems that the angular form validation doesn't watch the inputs in my other ng-switch block. Is there a way to make include them into the validation ?
Thank you very much !

You can replace ng-switch-when by ng-show, that way it doesn't get removed from the DOM, but is hidden using CSS.

Related

AngularJS ng-disabled - Not working if input $pristine, but works if form $pristine

I'm trying to disable a materializecss button if the value of a particular input in a form is blank, but I can only successfully disable it using ng-disable if the form is $pristine, not on the input.
This works:
data-ng-disabled="mainDetailsForm.$pristine"
but this doesn't:
data-ng-disabled="mainDetailsForm.niNumberInput.$pristine"
and this doesn't:
data-ng-disabled="niNumberInput.$pristine"
-
JSFiddle: https://jsfiddle.net/6qswosh8/.
-
Full HTML:
<form id="mainDetailsForm" name="mainDetailsForm">
<div class="row">
<div input-field class="input-field col-xs-12 col-md-4">
<input id="niNumberInput" name="niNumberInput" type="text" class="validate" pattern=".{9}" placeholder="National Insurance Number">
<label for="niNumberInput" data-error="National Insurance number must be 9 characters long">National Insurance Number</label>
</div>
<div input-field class="input-field col-xs-12 col-md-1">
<button data-ng-disabled="mainDetailsForm.niNumberInput.$pristine" class="btn button waves-effect"><span class="fa fa-search"></span>Verify</button>
</div>
</div>
</form>
To access the properties of individual inputs through the form you need to give the input an ng-model. The ng-model property is what binds it. I updated your jsfiddle https://jsfiddle.net/dougefresh/6qswosh8/1/ ( I also had to get angular working properly in the fiddle).
<input id="niNumberInput" name="niNumberInput" ng-model="niNumberInput" type="text" class="validate" pattern=".{9}" placeholder="National Insurance Number">
This small line in the docs is important "To allow styling of form as well as controls, ngModel adds these CSS classes:" It lists $dirty, $pristine, etc.. The docs specifically say they are bound to ng-model.
https://docs.angularjs.org/guide/forms

How to put form validation in angularjs

I have form like below,
<div ng-if="vm.settingsObj.others.name === 'Course Specialization'">
<div class="form-group">
<div class="col-xs-12" ng-repeat="specialization in vm.settingsObj.course_specialization">
<div class="row">
<div class="form-group col-sm-8" >
<input name="course_specialization{{$index}}" class="form-control" placeholder="Course Specialization" ng-model="specialization.value" >
</div>
<div class="form-group col-sm-4">
<button ng-click="vm.removeStatus('course_specialization',$index)" class="btn btn-danger">Remove</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-blue" ng-click="vm.addStatus('course_specialization')" >ADD</button>
</div>
</div>
Here i am incrementing the input field when i click on 'Add' button but when i leave input fields as empty and click on save it is getting saved.So what i need is form validation when my field is empty.Can anyone please help me.Thanks.
You have to wrap all inputs in a single form tag so that you can use angular form validation. Angular provides a well set of validations using classes and form controller and you should go for that. For more information you can find a reference from below links:
link one
or for a overview you can follow
link two

Angular ngSwitch hiding label element?

I have some AngularJS code to dynamically create form elements based on an array with form details (input type, value, etc.)
Here's the example code I have for a text input:
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World">
</label>
</div>
</div>
</div>
As you can see, the top-level div is repeated for every form element in the array. The problem, is that when input.input_type equals "text", it doesn't show unless I remove the label tags! I've tried doing label tags without any attributes (<label>...</label>) and it still doesn't show the input unless I remove them.
This is pretty strange, does anyone have any ideas why it would do that? Thanks!
EDIT: Now I've tried removing the input and putting text in (<label>Hello!</label>), and it shows up.....so it just doesn't allow inputs wrapped in a label element? o.O
You need to close your input tag.
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World"/>
</label>
</div>
</div>
</div>

How to create hidden 'payment_method_nonce' input by braintree.js?

I configure braintree.js like this:
braintree.setup(
brainTreeClientToken= 'token_from_server'
'dropin', {
container: 'brainTreeDropin',
form: 'checkout'
});
</script>
As i understand from the documentation of developers.braintree, you need to send a request param named 'payment_method_nonce' to your server, but it is not present in request. I don't see any js fault in browser console by the way.
Here is my form:
<form id="checkout" method="post"
th:action="....">
<div id="brainTreeDropin"></div>
<div >
<div class="form-group">
<label for="cardNumber">Credit Card Number</label>
<input data-braintree-name="number" ..other details.. "/>
</div>
<div class="form-group">
<label for="cardHolder">Name on Card</label>
<input data-braintree-name="cardholder_name" ..other details.. />
</div>
</div>
<div >
<div class="form-group">
<label for="cvc">Security Code(CVC)</label>
<input data-braintree-name="cvv" ..other details.. />
</div>
<div class="form-group">
<label for="expDate">Expiration Date</label>
<input data-braintree-name="expiration_date" ..other details.. />
</div>
</div>
</form>
Any idea of what's my fault?
I work at Braintree on the SDK Team.
The Drop-In integration requires a button or type=["submit"] element to be present within the form. I tried out your integration and was able to get a payment_method_nonce value sent to my server by adding in a <button>Pay</button> element. Try that out to see if that fixes your integration.
Also, just out of curiosity, is it your intent to have 2 credit card input methods inside of the same form? The Drop-In form contains the necessary fields for Credit Cards and you shouldn't need the data-braintree-name annotated inputs.

How do I get Angular 1.3 ngMessages to stop resizing my form?

So, I'm very new to front-end design. Basically I have a form and I would like to take advantage of ng-messages to show validation error messages when the user submits or leaves a field. My form resizes to fit the inputs and the error messages and it looks bad. I know I'm not going to be able to word this the right way so bear with me. Ultimately I want the form to be sized properly on document ready. And when a validation error happens, the form won't resize.. there will be spaces for the ng-messages to be built in, so the form doesn't grow or contract based on whether there are error messages or not.
Here are two screen shots from the plunker to show the expanding contracting form:
start up form size:
after blurred out of both inputs:
Thanks in advance for any insight you all can shed.
here's a link to my plunkr: plunkr
So I found A solution. I don't think it's THE solution.
Here's my html body:
<body ng-controller="mainCtrl">
<h1>Hello Plunker!</h1>
<div class="container">
<div class="myclass">
<form class="form" role="form" name="myform" novalidate>
<div class="form-group">
<input class="form-control" type="text" name="name" ng-model="newname" placeholder="Name" required/>
<div ng-if="myform.name.$touched" ng-messages="myform.name.$error">
<div ng-message="required">This field is required</div>
</div>
</div>
<div class="form-group">
<input class="form-control" type="email" name="email" ng-model="newemail" placeholder="Email" required/>
<div ng-if="myform.email.$touched" ng-messages="myform.email.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Not a valid email</div>
</div>
</div>
<div class="form-group">
<button type="submit" ng-click="submit()">Submit</button>
</div>
</form>
</div>
</div>
<p>User Entered: {{newname}}</p>
<p>myform.name.$error = {{myform.name.$error | json}}</p>
<p>form submitted = {{submitted}}</p>
</body>
So I added some css markdown for form-group classes that looks like this:
body .container form .form-group {
height: 50px;
}
this way the size of the form-group stays static and my form is not resizing based on whether or not I have error messages.
However... I really don't think this will work on mobile devices. Have yet to test that. But if anybody has a more robust, smarter way of fixing the problem, I would love to hear it!
Instead of having the ng-if on the ng-message divs you can add a conditional class to add visibility: none to the div when $touched is false. This way the div still takes up the space but it is hidden from view.
http://plnkr.co/edit/8SiZ5jyAQPolJGefhLER?p=preview
HTML
<div ng-class="{'invisible': !myform.name.$touched}" ng-messages="myform.name.$error">
CSS
.invisible {
visibility: hidden;
}

Categories

Resources