AngularJS bind $scope data to form - angularjs

I have a $rootScope variable:
$rootScope.register_data = {};
I have a view which contains a form:
<form name="register_data">
<div class="popup signup">
<div class="social">
<a ng-controller="FacebookCtrl" ng-click="login()" href="javascript:void(0)" class="facebook fb-login-button">Sign up with Facebook</a>
<div class="clear"></div>
</div>
<div class="userinfo">
<div class="left"><input type="text" ng-model="register_data.firstname" placeholder="First Name" tabindex="1" required></div>
<div class="right"><input type="text" ng-model="register_data.email" placeholder="Email Address" tabindex="4" required></div>
<div class="left"><input type="text" ng-model="register_data.lastname" placeholder="Last Name" tabindex="2" required></div>
<div class="right optional"><div class="tip">optional</div><input type="text" ng-model="register_data.dob" tabindex="5" placeholder="DoB (dd/mm/yyyy)"></div>
<div class="left"><input type="text" ng-model="register_data.phone" placeholder="Phone Number" tabindex="3" required></div>
<div class="right password"> <input type="password" ng-model="register_data.password" placeholder="Password" tabindex="6" required></div>
<div class="clear"></div>
</div>
<div class="control">
<span class="terms">I agree to the terms & conditions</span>
Sign up
</div>
</div>
</form>
The form has a name register_data and each field is bound to that via ng-model. It seems to overwrite my $rootScope.register_data variable as when I update that none of the form controls update. Though if I remove the form name then it works. However i need the form name to do proper form validation.
Anyone know how I can bind the form controls to a scope object but also keep the form validation?

Change the form name to be something else other than the name used as model, since the form controller will be published into related scope, under this name.

Related

How to assign value to input type file for edit form in angular js

I am having problem in assigning the value to form which in Angular JS, On click of the edit i am assigning values to form fields using the ngModel. I am getting the error in chrome for input type file
could you help me in finding the solution for this.
This is my HTML Code, binding with ng-model
<div class="col-xs-4">
<div class="height:100%;">
<input type="file" ng-model="addmaterials.vray_mat_file" name="material_vray_mat" id="material_vray_mat" class="hidden" required="" ng-model-options="{ allowInvalid: true }"/>
<label class="mat_file" for="material_vray_mat" >Upload Mat file</label>
</div>
</div>
<div class="col-xs-4">
<div class="height:100%;">
<input type="file" required="" ng-model="addmaterials.vray_sbsar_file" name="material_vray_sbsar" id="material_vray_sbsar" ng-disabled="!addmaterials.createdWithSubstance" class="hidden" >
<label class="mat_file" for="material_vray_sbsar" >Upload Sbsar</label>
</div>
</div>
<div class="col-xs-4">
<div class="height:100%;">
<input type="file" required="" onchange="angular.element(this).scope().setVrayPrevImg(this)" ng-model="addmaterials.vray_prev_img" name="material_vray_prev" id="material_vray_prev" class="hidden" >
<label class="mat_file" for="material_vray_prev" >Upload Preview</label>
</div>
</div>

How to disable submit button untill all the fields are filled in a form?

I have a form with a set of fields. My problem is, submit button is disabled initially but the moment any one of the field goes valid or non-empty button is getting enabled. Here is my source code:
<form class="aui newDiscoveryForm" name="newDiscoveryForm" ng-submit="createNewDiscovery(user)" novalidate>
<fieldset class="group">
<div class="field-group">
<label class="label">Product Name</label>
<input class="text" type="text" name="input1" ng-model="user.productName" value="" id="productName" required/>
<p ng-show="newDiscoveryForm.input1.$invalid && !newDiscoveryForm.input1.$pristine" style="color: #880000">Product name is required.</p>
<div class="error"></div>
<span class="result_product" style="color: #880000"></span>
</div>
<div class="field-group">
<input class="text" type="text" name="input2" ng-model="user.endUsers" value="" required/>
<p ng-show="newDiscoveryForm.input2.$invalid && !newDiscoveryForm.input2.$pristine" style="color: #880000">EndUsers required.</p>
<label class="label">Who are end users</label>
<div class="description">[Gamers, Engineers, Commuters, Media, Goverment]</div>
</div>
<div class="field-group">
<label for="licenseKey">What Problem Are They Facing Today</label>
<textarea class="textarea" rows="4" cols="10" name="input3" ng-model="user.problemsArea" id="problemsarea" value="" required></textarea>
<p ng-show="newDiscoveryForm.input3.$invalid && !newDiscoveryForm.input3.$pristine" >ProblemsArea required.</p>
<div class="description">Spend So much in .....</div>
</div>
<div class="field-group">
<label class="label">What kind of product is this</label>
<input class="text" type="text" name="input4" ng-model="user.productKind" id="productkind" value="" required/>
<p ng-show="newDiscoveryForm.input4.$invalid && !newDiscoveryForm.input4.$pristine" >ProductKind required.</p>
<div class="description">[Software, MobileApp, JIRA-Plugin]</div>
</div>
<div class="field-group">
<label for="d-lname">How do you plan to solve the problem</label>
<input class="text long-field" type="text" id="problemSoln" name="input5" ng-model="user.problemSoln" value="" required />
<p ng-show="newDiscoveryForm.input5.$invalid && !newDiscoveryForm.input5.$pristine" >ProblemSolution required.</p>
<div class="error"></div>
<div class="description">[Load Balancing of Personal, Automated Traffic Info]</div>
</div>
<div class="field-group">
<label for="d-lname">Who are your competitors</label>
<input class="text long-field" type="text" id="competitors" name="input6" ng-model="user.competitors" value="" required/>
<p ng-show="newDiscoveryForm.input6.$invalid && !newDiscoveryForm.input6.$pristine" >Competitors required.</p>
<div class="error"></div>
<div class="description">Traditional Commuting Solution</div>
</div>
<div class="field-group">
<label for="d-lname">How do you differntiate from your competitors</label>
<input class="text long-field" type="text" id="differentiator" name="input7" ng-model="user.differentiator" value="" required/>
<p ng-show="newDiscoveryForm.input7.$invalid && !newDiscoveryForm.input7.$pristine" >Differentiator required.</p>
<div class="error"></div>
<div class="description">[Automated, Secure]</div>
</div>
</fieldset>
<div class="buttons-container">
<div class="buttons">
<button class="aui-button aui-button-primary ap-dialog-submit" value="Submit" type="submit"
id="save-button" ng-click = "createNewDiscovery(user)" ng-disabled="newDiscoveryForm.$invalid">Save</button>
<button id="close-button" type="button" class="aui-button aui-button-link ap-dialog-cancel" ng-click = "cancelClick()">Cancel</button>
</div>
</div>
</form>
How can I make sure that submit button is disabled untill all the fields are filled.
I tried almost all the available solutions like make all the fields required, make the submit button as ./. But nothing seems to be working.
You are almost doing it right. To use angular's form validation, you have to use the angular directives for that. For example, use the ng-required instead of the normal required (though it will work, but you should use ng-required for best practices):
<form name="newDiscoveryForm">
<input type="text" name="someName"
ng-model="someModel"
ng-required="true" /> <!-- use ng-required -->
<!-- other inputs -->
<!-- $invalid will evaluate to true if the `ng-required` are not valid -->
<button type="submit"
ng-disabled="newDiscoveryForm.$invalid">
Submit!
</button>
</form>
See this JSFIDDLE

validate form on button in angularjs

I have to validate a form only after click on button. Now it is working on blur and focus. How can I disable focus and blur validation and validate them on button click. fiddle
<form ng-app="form-example" class="row form-horizontal" novalidate>
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="email" id="inputEmail" placeholder="Email" ng-model="email" required>
<div class="input-help">
<h4>Invalid Email</h4>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input ng-model="password" class="immediate-help" required type="password" id="inputPassword" placeholder="Password">
<div class="input-help">
<ul>
<li>required</strong></li>
</ul>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn">Create Account</button>
</div>
</div>
</form>
You could have dummy class on your form level that will tell the form has been submitted or not like ng-class="{submitted: submitted}", and on click of button we will use ng-click="submitted=true" so that after clicking on button form will have submitted class on it. Then we will apply our CSS rule for ng-invalid & ng-dirty to also consider an .submitted class by using concept of deep nesting of classes.
/* Show red border when stuff has been typed in, but its invalid */
.submitted .ng-dirty.ng-invalid {
border-color:#ec3f41;
}
Other CSS rules should be taken care of this thing like I shown above.
the problem is that you just added the validation and you're showing the message on ng-invalid ( with css). here is an example of working code to do what you want.
<div class="form-group col-xs-12 required" ng-class="{ 'has-error' : creditCardDetailsForm.security_code.$invalid && submitted}">
<label class="col-lg-28 col-l-5 col-md-5 text-left font-l-20 primary control-label">Security code (CVC) </label>
<div class="col-lg-3 col-md-4 text-left">
<input class="form-control" name="security_code" data-stripe="cvc" ng-model="payment_details.security_code" type="number" minLength="3" required>
<p ng-show="creditCardDetailsForm.security_code.$invalid && submitted" class="help-block">Security code is required.</p>
<p ng-show="creditCardDetailsForm.security_code.minLength.$invalid && submitted" class="help-block">Invalid CVC.</p>
</div>
</div>
see, here I check if the form is invalid and the submitted has been clicked...
in my controller:
$scope.purchasePackage = function (status, response) {
$scope.submitted = true;
if ($scope.creditCardForm.creditCardDetailsForm.$valid) {
//do something
}
};
since you did your hide and show with CSS you can just add the class on click to the form and then do .submitted .ng-invalid so it only shows up after you have submitted.

Doing AngularJS validation without making use of form element?

Is it possible to make use of the angularJS validation tools without wrapping the controls in a form, and what would this be called?
Normal angularjs form validation example:
<form name="form" class="form-validation">
<p class="text-muted">Please fill the information to continue</p>
<div class="form-group">
<label>Username <em class="text-muted">(allow 'a-zA-Z0-9', 4-10 length)</em></label>
<input type="text" class="form-control" ng-model="user.name" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" required >
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" ng-model="user.email" required >
</div>
<button type="submit" class="btn btn-success" ng-disabled="form.$invalid">Submit</button>
</form>

$invalid not triggering in ionic angularjs

I'm trying to do a required field validation in ionic / angularjs and it doesn't seem to be triggering {{user.$invalid}} is not being set when I interact with the form. New to angular and ionic, so what is the right way of doing required field validators in this case.
<form novalidate >
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="user.uname" required>
<div class="error-container" ng-show="user.uname.$dirty && user.uname.$invalid">
<small class="error" ng-show="user.uname.$error.required">Please input a uname</small>
</div>
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="user.pwd" required>
<div class="error-container" ng-show="user.pwd.$dirty && user.pwd.$invalid">
<small class="error" ng-show="user.pwd.$error.required">Please input a password</small>
</div>
</label>
<label class="item">
<div lass="error-container">{{message}}</div>
<div lass="error-container">Invalid:{{user.$invalid}}</div>
<button class="button button-block button-positive" ng-disabled="user.$invalid" ng-click="login(user)">Log in</button>
</label>
</div>
</form>
Looks like you just forgot to name your form:
<form novalidate name="user">
Angular will only create $scope members for named forms and inputs.
From the docs https://docs.angularjs.org/guide/forms:
A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.
Similarly, an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control. The name attribute specifies the name of the property on the form instance.

Resources