<div class="row">
<div class="col-md-6">
<div class="form-body">
<div class="form-group">
<label>First Name</label>
<div class="input-group">
<input type="text" tabIndex="1" name="first_name" class="form-control">
</div>
</div>
<div class="form-group">
<label>Email Address</label>
<div class="input-group">
<input type="email" tabIndex="3" name="username" class="form-control" ng-model="username" required user-exist /><br/> <span style="color: red" ng-show="partnerForm.username.$touched && partnerForm.username.$invalid">
<span ng-show="partnerForm.username.$error.required">Email is required.</span>
<span ng-show="partnerForm.username.$error.email">Enter Correct Format.</span>
<span ng-show="partnerForm.username.$error.userExist">User already exists.</span>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-body">
<div class="form-group">
<label>Last Name</label>
<div class="input-group">
<input type="text" tabIndex="2" name="last_name" class="form-control">
</div>
</div>
</div>
</div>
</div>
the tabindex 3 is not working.i have checked by removing the required attr then it is working .the attributes required and tabindex is conflicting with each other.please help me to solve this.or provide a directive (working) for tabindex.
Related
When I try to access user.firstname value in controller, it gives the following error.
TypeError: Cannot read property 'firstname' of undefined
$scope.signUpCustomer = function(){
console.log("GGGGGGGGGGGGGGGGGGGGGGGGG ", $scope.user.firstname);
}
<form class="form-horizontal font-hp-simplified signUpUserForm row" role="form" ng-submit="signUpCustomer()" name ="signUpUserForm" ng-show="!userVendor">
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="firstname" class="col-md-12">First Name:</label>
<div class="col-md-12">
<input ng-model="user.firstname" type="text" class="form-control" name="firstname" required />
<span class="text-danger" ng-show="signUpUserForm.firstname.$invalid && signUpUserForm.firstname.$dirty ">First name is required</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lastname" class="col-md-12">Last Name:</label>
<div class="col-md-12">
<input ng-model="user.lastname" type="text" class="form-control" name="lastname" required />
<span class="text-danger" ng-show="signUpUserForm.lastname.$invalid && signUpUserForm.lastname.$dirty ">Last name is required</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="email" class="col-md-12">Email:</label>
<div class="col-md-12">
<input ng-model="user.email" type="email" class="form-control" name="email" required />
<span class="text-danger" ng-show="signUpUserForm.email.$error.required && signUpUserForm.email.$dirty ">Email is required</span>
<span class="text-danger" ng-show="signUpUserForm.email.$error.email && signUpUserForm.email.$dirty ">Please enter valid email</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="password" class="col-md-12">Password:</label>
<div class="col-md-12">
<input ng-model="user.password" type="password" class="form-control" name="password" required />
<span class="text-danger" ng-show="signUpUserForm.password.$invalid && signUpUserForm.password.$dirty">Password is required</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="phone" class="col-md-12">Phone:</label>
<div class="col-md-12">
<input ng-model="user.phone" type="text" class="form-control" name="phone" required />
<span class="text-danger" ng-show="signUpUserForm.phone.$invalid && signUpUserForm.phone.$dirty">Phone is required</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="country" class="col-md-12">Country:</label>
<div class="col-md-12">
<select name="country" ng-model="user.country" type="text" class="form-control form-bg-white" required>
<!-- <option value="" disabled selected>Select Your Country</option> -->
<option value="" disabled selected></option>
<option ng-repeat="country in countries" value="{{country}}">{{country}}</option>
</select>
<span class="text-danger" ng-show="signUpUserForm.country.$invalid && signUpUserForm.country.$dirty">Country is required</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-12">
<!-- Button -->
<div class="form-group">
<div class="col-md-12">
<div class="icon-user-signup">
<div class="input-group-addon">
<i class="fa fa-user"></i>
</div>
<button id="btn-signup" class="btn btn-primary col-md-12">SIGN UP</button>
</div>
</div>
<!-- <div class="mrg-top-10 col-md-12 text-right">
<h4><a ng-click="go('/seller#/signup')" class="ven-link">
Become a vendor today
</a></h4>
</div>-->
</div>
</div>
</div>
<!-- <div class="col-md-12 control">
<div class="signup-border" >
Already have an account ?
<a ui-sref="loginUser" >
Sign In Here
</a>
</div>
</div> -->
</form>
You need to initialize the $scope.customer first in controller
$scope.user = {};
I am beginer in angular js. I am validating a form with some input feild and form is posting on ng-click but validation is not working, validation message are displaying for a white then disappear i have to submit the form after validating. form ng-click should not be called untill the form is valid please help me . Thanks in advance.
<form name="teamForm" novalidate ng-submit="submit(teamForm)" class="formfields">
<div class="col-md-12">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="lname">First Name:</label>
<input type="text" name="firstname"
ng-model="FirstName" class="form-control custom-form-control"
placeholder="First Name" required="required">
<span class="text-danger"
ng-show="(teamForm.firstname.$dirty || submitted) && teamForm.firstname.$error.required">Required</span>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" name="lastname"
ng-model="LastName" class="form-control custom-form-control"
placeholder="Last Name" required="required">
<span class="text-danger"
ng-show="(teamForm.lastname.$dirty || submitted) && teamForm.lastname.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="email">Email:</label>
<input type="text" name="email"
ng-model="Email" class="form-control custom-form-control"
ng-pattern="/^[^\s#]+#[^\s#]+\.[^\s#]{2,}$/"
placeholder="Email" required="required">
<span class="text-danger"
ng-show="(teamForm.email.$dirty || submitted) && teamForm.email.$error.required">Required</span>
<span class="text-danger"
ng-show="teamForm.email.$dirty &&teamForm.email.$error.pattern">Please Enter Valid Email</span>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Phone Number:</label>
<div class="clearfix"></div>
<input type="text" name="phone"
ng-model="Phone" class="form-control custom-form-control"
placeholder="XXXXXXXXXX" required="required">
<span class="text-danger"
ng-show="(teamForm.phone.$dirty || submitted) && teamForm.phone.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label>Message:</label>
<textarea class="form-control rounded-0" rows="5"
name="comment" placeholder="Message"
ng-model="Comment" required="required"></textarea>
<span class="text-danger"
ng-show="(teamForm.comment.$dirty || submitted) && teamForm.comment.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label>Upload Resume:</label>
<!--<input type="file" name="ResumePath" id="filehandler" />-->
<input type="file" id="file1" name="file" class="filelabel sr-only" multiple ng-files="getTheFiles($files)" onchange="Checkfiles($(this))" />
<!-- <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/> -->
<label for="file1" class="form-control">
<span><i class="fa fa-file"></i> Drag file here or choose file</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div vc-recaptcha key="'6Lc860IUAAAAAAyWI9WD8EV4eITu4ODdhuYHdzi8'"
class="grecaptcha" ng-model="respone1"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<button type="button" id="btnSubmit"
ng-click="uploadFiles()" value="Upload"
class="btn btn-green center-block pull-left">
<i class="fa fa-send"></i>{{btnText}}</button>
</div>
</div>
<div class="form-group text-center">
<h5 class="text-success" style="font-weight:bold">{{messagesuccess}}</h5>
<h5 class="text-danger" style="font-weight:bold">{{messageerror}}</h5>
</div>
</div>
</form>
ng-click (or it's vanilla cousin, onclick) do not check form validation. The function for submission needs to be defined at the form level, and then you specify which button acts as the submit button in order to get form behavior.
I see you already have a submit function defined. I assume you want to change that to uploadFiles. And if you want the form to conduct validation, remove the novalidation attribute.
<form name="teamForm" ng-submit="uploadFiles()" class="formfields">
then, for the button you would specify it is the submission button and remove the ng-click.
<button type="submit" id="btnSubmit"
value="Upload"
class="btn btn-green center-block pull-left">
<i class="fa fa-send"></i>{{btnText}}</button>
I want to load data of a selected row in a form in order to update it. I successfully had the data loaded in the form, the but the problem is when I use ng model to save the data all the stuff have been put in the form fields disappear.
<div class="panel-body pan" ng-if="loadedpr">
<form action="#">
<div class="form-body pal">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="refprojet" class="control-label">
Référence Projet *</label>
<input id="refprojet" type="text" value="{{loadedpr.ref_projet}}" class="form-control" disabled ng-model="ref_projet"/>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="intitulefr" class="control-label">
Intitulé *</label>
<input id="intitulefr" type="text" value="{{loadedpr.intitule_fr}}" class="form-control" ng-model="intitule_fr" />
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="ctot" class="control-label"> Coût Total (TND) *</label>
<input id="ctot" type="text" value="{{loadedpr.cout_total}}" ng-model="cout_total" class="form-control" disabled ng-model="cout_total" />
</div>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label">
Description</label><textarea id="description" rows="3" value="{{loadedpr.description}}" ng-model="description" class="form-control"></textarea>
</div>
<div class="form-actions text-center pal">
<button type="submit" class="btn btn-primary" ng-click="upadateProjet()">Valider</button>
</div>
</div>
</form>
this is the angularjs method:
$scope.updateProjet= function(){
$scope.projet={'ref_projet':$scope.refprojet,'intitule_fr':$scope.intitule_fr,'description':$scope.description,cout_total':$scope.cout_total};
$http.put("/editprojet", $scope.projet)
.success(function(data,status,headers,config){
});
}
rest controller
#RequestMapping(value="/editprojet",method=RequestMethod.PUT)
public Projet editProjet(#RequestBody Projet p) {
return projetMetier.editProjet(p);
}
you are using button type="submit"
it will clear the form use button tag
<button></button>
$scope.updateProjet= function(projData){
$http.put("/editprojet", projData)
.success(function(data,status,headers,config){
}).error(function(data){
console.log(data)
});
}
<div class="panel-body pan" ng-if="loadedpr">
<form action="#">
<div class="form-body pal">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="refprojet" class="control-label">
Référence Projet *</label>
<input id="refprojet" type="text" value="{{loadedpr.ref_projet}}" class="form-control" disabled ng-model="proj.ref_projet"/>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="intitulefr" class="control-label">
Intitulé *</label>
<input id="intitulefr" type="text" value="{{loadedpr.intitule_fr}}" class="form-control" ng-model="proj.intitule_fr" />
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="ctot" class="control-label"> Coût Total (TND) *</label>
<input id="ctot" type="text" value="{{loadedpr.cout_total}}" ng-model="proj.cout_total" class="form-control" disabled ng-model="proj.cout_total" />
</div>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label">
Description</label><textarea id="description" rows="3" value="{{loadedpr.description}}" ng-model="proj.description" class="form-control"></textarea>
</div>
<div class="form-actions text-center pal">
<button type="button" class="btn btn-primary" ng-click="upadateProjet(proj)">Valider</button>
</div>
</div>
</form>
</div>
have you tried removing the value attribute? this happened to me when I once added DOM forms on the fly, I managed by using jquery to force capture by:
$(this).find('.inputClass').val();
this sort of jequery is already embeded inside Angular so no need to add the the library.
So, I have a parent form with a nested set of ng-forms like this:
<form class="row" name="parentForm" ng-repeat="model in controller.addresses track by $index" novalidate>
<div class="col-xs-12 row-title">
<h1>{{ model.type || 'Delivery' }} address</h1>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4">
<div class="form" name="saveForm" ng-form>
<div class="form-group">
<label class="control-label">Company name</label>
<input class="form-control" name="company" type="text" placeholder="Enter your company name" ng-model="model.company" />
</div>
<div class="form-group" ng-class="{ 'has-error' : saveForm.address1.$invalid && !saveForm.address1.$pristine }">
<label class="control-label">House name/number</label>
<input class="form-control" name="houseName" type="text" placeholder="Please enter your address 1" ng-model="model.houseName" ng-minlength="3" required />
</div>
<div class="form-group">
<label class="control-label">Street</label>
<input class="form-control" name="street" type="text" placeholder="Please enter your address 2" ng-model="model.street" />
</div>
<div class="form-group">
<label class="control-label">Town</label>
<input class="form-control" name="town" type="text" placeholder="Please enter your address 3" ng-model="model.town" />
</div>
<div class="form-group">
<label class="control-label">County</label>
<input class="form-control" name="county" type="text" placeholder="Please enter your address 4" ng-model="model.county" />
</div>
<div class="form-group" ng-class="{ 'has-error' : saveForm.postCode.$invalid && !saveForm.postCode.$pristine }">
<label class="control-label">Post code</label>
<input class="form-control" name="postCode" type="text" placeholder="Enter your post code" ng-model="model.postCode" ng-minlength="3" required />
</div>
</div>
</div>
</form>
I then have a button:
<div class="row">
<div class="col-xs-12 col-sm-4 col-lg-4">
<div div class="row">
<div class="col-xs-6 tile">
<a class="red" ui-sref="^">
<i class="fa fa-trash"></i>
<div class="footer">Back</div>
</a>
</div>
<div class="col-xs-6 tile" ng-if="parentForm.$valid">
<a class="yellow" ui-sref="^.finance">
<i class="fa fa-arrow-right"></i>
<div class="footer">Continue</div>
</a>
</div>
</div>
</div>
</div>
I want this button to only show if all child forms are valid. I was hoping that I could just use parentForm.$valid but that doesn't work.
Does anyone know how to solve this?
Try to do parentForm.saveForm.$valid.
It will work
Nested forms aren't valid in HTML5 - but you can place your saveForm outside the parentForm and then use the input element's form attribute to specify a form for your input elements.
<form name="form1">
<input type="string" ng-model="form1input" required>
<input type="string" form="form2" ng-model="form2input" required>
</form>
<div ng-form="form2" id="form2"></div>
<button ng-if="form1.$valid && form2.$valid">Click</button>
Plunker: https://plnkr.co/edit/y9ipsNoEW596guLf2CzM?p=preview
I have a typical contact form where I concat the values into a preview div with AngularJS. This works fine if all the fields are filled out. I would like to move this into a controller so that I can conditionally add some static text such as only put a slash between phone and fax if both those fields are filled. I cannot find any sample code that goes beyond concatenating a couple values.
<div class="col-md-offset-1">
<div class="form-group">
<label class="control-label col-sm-2" for="companyFirm">Company/Firm</label>
<div class="col-sm-10">
<input type="text" ng-model="companyFirm" class="form-control" placeholder="Enter your company or firm name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="contact">Contact</label>
<div class="col-sm-10">
<input type="text" ng-model="contact" class="form-control" placeholder="Enter the full name of the listing contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="address">Address</label>
<div class="col-sm-10">
<input type="text" ng-model="address" class="form-control" placeholder="Enter your street address">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="city">City</label>
<div class="col-sm-10">
<input type="text" ng-model="city" class="form-control" placeholder="Enter your city">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="state">State</label>
<div class="col-sm-4">
<input type="text" ng-model="state" class="form-control" placeholder="Enter your state">
</div>
<!-- </div>
<div class="form-group"> -->
<label class="control-label col-sm-2" for="phone">Phone</label>
<div class="col-sm-4">
<input type="phone" ng-model="phone" ng-change="getPhoneFax()" class="form-control" placeholder="Enter your phone number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="zipcode">Zip Code</label>
<div class="col-sm-4">
<input type="text" ng-model="zipcode" class="form-control" placeholder="Enter your Zip Code">
</div>
<!-- </div>
<div class="form-group"> -->
<label class="control-label col-sm-2" for="fax">Fax</label>
<div class="col-sm-4">
<input type="phone" ng-model="fax" class="form-control" placeholder="Enter your fax number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email</label>
<div class="col-sm-10">
<input type="text" ng-model="email" class="form-control" placeholder="Enter your email address">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="website">Website</label>
<div class="col-sm-10">
<input type="text" ng-model="website" class="form-control" placeholder="Enter your website address">
</div>
</div>
</div>
<h4>60-word Description</h4>
<div class="col-md-offset-1">
<div class="form-group">
<label class="control-label col-sm-2" for="description"></label>
<div class="col-sm-10">
<div>You have used <span class="wordCount">{{description|wordCounter}}</span> of your allowed 60 words.</div>
<textarea ng-model="description" class="form-control" rows="4" required></textarea>
<span class="help-block">Your 60 word, plain text only description begins after the listing header. You will receive a proof for approval prior to publication.</span>
</div>
</div>
<div class="col-md-offset-3 col-sm-6" style="background:#ddd; padding:15px; margin-top:50px;">
<strong>Live preview of listing</strong>
<div style="background:#fff; border:5px solid #eee; padding:15px; line-height:1em;">
<strong><span class="text-uppercase" style="font-size:1.3em;" ng-show="companyFirm">{{companyFirm}}<br /></span>
<span ng-show="contact">{{contact}}<br /></span></strong>
<span style="font-weight:500;">
<span ng-show="address">{{address}}<br /></span>
<span ng-show="city">{{city}}, </span><span ng-show="state" class="text-uppercase">{{state}}</span> <span ng-show="zipcode">{{zipcode}}</span><br />
<span ng-show="phone">{{phone}} / </span><span ng-show="fax">Fax: {{fax}}<br /></span>
<span ng-show="email">{{email}}<br /></span>
<span ng-show="website">{{website}}<br /></span>
</span>
<span style="color:#787878;">{{description}}</span>
</div>
</div>
<div class="clearfix"></div>
</div>
http://plnkr.co/edit/1oqneNRXuTXhiqE7vKWw?p=catalogue
If I understand question correctly, in controller You can use standard js concatenate:
$scope.phoneFax = function() {
//You can also save result in variable;
return ($scope.phone ? $scope.phone : '')
+ ($scope.phone && $scope.fax ? ' / ' : '')
+ ($scope.fax ? 'Fax: ' + $scope.fax : '');
};
Template:
<span>{{phoneFax()}}</span>
Also you can make it directly in the template:
<span ng-show="phone">{{phone}}</span>
<span ng-show="fax && phone"> / </span>
<span ng-show="fax">Fax: {{fax}}<br /></span>