I am quite new to Angular. I would like to change form dynamically as per the selection from select box.
<form name="register" method="post" id="register" role="form" ng-submit="registerForm()">
<div class="form-group" ng-class="{ 'has-error' : erroractype }">
<select id="actype" name="actype" class=" selector form-control" ng-model="formData.actype" required="required">
<option value="" selected="selected" >I am</option>
<option value="1"> Student</option>
<option value="2"> Teacher</option>
<option value="3"> School</option>
</select>
<span class="help-block" ng-show="errorName" class="ng-cloak">{{ erroractype }}</span>
</div>
<div class="form-group" ng-class="{ 'has-error' : errorFname }">
<input type="text" id="fname" name="fname" placeholder="First Name" title="Please Enter Your First Name" class="form-control input-sm textbox1" required="required" ng-model="formData.Fname">
<div class = "alert alert-danger" ng-show="errorFname" class="ng-cloak">{{errorFname}}</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : errorLname }">
<input type="text" id="lname" name="lname" placeholder="Last Name" title="Please Enter Your Last Name" class="form-control input-sm textbox1" required="required" ng-model="formData.Lname">
<div class = "alert alert-danger" ng-show="errorLname" class="ng-cloak">{{ errorLname }}</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : errorEmail1 }">
<input type="email" id="email1" name="email1" placeholder="Email" class="form-control input-sm textbox1" title="Please Enter Your Valid Email" required="required" ng-model="formData.Email1">
<div class = "alert alert-danger" ng-show="errorEmail1" class="ng-cloak">{{ errorEmail1 }}</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : errorPassword1 }">
<input type="password" name="password1" id="password1" placeholder="Password" title="Please enter AlphaNumeric value" class="form-control input-sm textbox1" required="required" ng-model="formData.Password1">
<div class = "alert alert-danger" ng-show="errorPassword1" class="ng-cloak">{{ errorPassword1 }}</div>
{{ errorPassword1 }}
</div>
<div class="form-group" ng-class="{ 'has-error' : errormobile }">
<input type="text" id="mobile" name="mobile" placeholder="Mobile Number (+1)" title="Please Enter Your Contact Number without Coutry Code." class="form-control input-sm textbox1" required="required" ng-model="formData.mobile">
<div class = "alert alert-danger" ng-show="errormobile" class="ng-cloak">{{ errormobile }}</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-home" name="btn-register" id="btn-register" required="required">Register</button>
</div>
</form>
As you can see three types of registration can be done as per the selection in select box. Student, Teacher and School.
For Student and Teacher form is looking fine. They would have first name & last name. But when people select school that time first name last name looks ugly. It should be only school with single textbox.
So, basically I want whenever school get selected lastname text box get hidden and First Name textbox become Name of School. How can I achieve that?
Okay I came up with something like this. When You'll select the option One you'll see the changes you require. Here is a link to the working example: http://codepen.io/ayushgp/pen/BWMjgG
HTML code:
<body ng-app="example">
<div ng-controller="test">
<select name="number" ng-model="type">
<option value="0" selected>--Select an option--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div>
{{type == 1 ? 'Name of school' : 'First Name'}}: <input type="text" />
</div>
<div ng-style="{'display':type==1?'none':'block'}">
Last name: <input type="text" />
</div>
</div>
</body>
Related
i'm working on a school project. My project has some forms that need to be validated. Login and register form validation work well but the other form used to upload item is not validated. I have tried to figure out the error but get no result.
Note that the function works ok, just the validation get error
I'm using AngularJS 1.4.5 along with Google Firebase
This is my registration HTML code:
<form name="registerform" ng-submit="register()" novalidate>
<div class="form-group">
<p ng-show="message">{{message}}</p>
<label>First name</label>
<input type="text" name="firstname" class="form-control" placeholder="First name" ng-model="user.firstname" ng-required="true">
<p class="text-danger" ng-show="registerform.firstname.$invalid && registerform.firstname.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Last name</label>
<input type="text" name="lastname" class="form-control" placeholder="Last name" ng-model="user.lastname" ng-required="true">
<p class="text-danger" ng-show="registerform.lastname.$invalid && registerform.lastname.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Email address</label>
<input type="email" name="email" class="form-control" placeholder="Enter email" ng-model="user.email" ng-required="true">
<p class="text-danger" ng-show="registerform.email.$invalid && registerform.email.$touched">Invalid email</p>
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" placeholder="Password" ng-model="user.password" ng-minlength="6" ng-required="true">
<p class="text-danger" ng-show="registerform.password.$invalid && registerform.password.$touched">Password must have at least 6 characters</p>
</div>
<button type="submit" class="btn btn-success btn-block" ng-disabled="registerform.$invalid">Register</button><br>
Already have an account? Login
</form>
And this is my item upload form:
<p ng-show="message">{{message}}</p>
<form name="uploadItem" ng-submit="uploadItem()" novalidate>
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Food name" ng-model="foodname" ng-required="true">
<p class="text-danger" ng-show="uploadItem.name.$invalid && uploadItem.name.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Category</label>
<select class="form-control" name="category" ng-model="foodcategory" ng-required="true">
<option value="">---Please select---</option>
<option value="appetizer">Appetizer</option>
<option value="maincourse">Main Course</option>
<option value="dessert">Dessert</option>
<option value="drinks">Drinks</option>
<option value="bakery">Bakery</option>
</select>
<p class="text-danger" ng-show="uploadItem.category.$invalid && uploadItem.category.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Image</label>
<input type="text" name="image" class="form-control" placeholder="Food image" ng-model="foodimage" ng-required="true">
<p class="text-danger" ng-show="uploadItem.image.$invalid && uploadItem.image.$touched">This field is required</p>
</div>
<div class="form-group">
<label>How to cook</label>
<textarea class="form-control" rows="3" name="howtocook" placeholder="How to cook" ng-model="foodhowtocook" ng-required="true"></textarea>
<p class="text-danger" ng-show="uploadItem.howtocook.$invalid && uploadItem.howtocook.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Video</label>
<input type="text" name="video" class="form-control" placeholder="Youtube embed link" ng-model="foodvideo" ng-required="true">
<p class="text-danger" ng-show="uploadItem.video.$invalid && uploadItem.video.$touched">This field is required</p>
</div>
<button type="submit" class="btn btn-primary btn-block" ng-disabled="uploadItem.$invalid">Submit</button><br>
</form>
The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when submitted
Hye,
I tried to reproduce your scenario, and I am able to validate upload form.
Please have a look.
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<p ng-show="message">{{message}}</p>
<form name="uploadItem" ng-submit="uploadItem()" novalidate>
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Food name" ng-model="foodname" ng-required="true">
<p class="text-danger" ng-show="uploadItem.name.$invalid && uploadItem.name.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Category</label>
<select class="form-control" name="category" ng-model="foodcategory" ng-required="true">
<option value="">---Please select---</option>
<option value="appetizer">Appetizer</option>
<option value="maincourse">Main Course</option>
<option value="dessert">Dessert</option>
<option value="drinks">Drinks</option>
<option value="bakery">Bakery</option>
</select>
<p class="text-danger" ng-show="uploadItem.category.$invalid && uploadItem.category.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Image</label>
<input type="text" name="image" class="form-control" placeholder="Food image" ng-model="foodimage" ng-required="true">
<p class="text-danger" ng-show="uploadItem.image.$invalid && uploadItem.image.$touched">This field is required</p>
</div>
<div class="form-group">
<label>How to cook</label>
<textarea class="form-control" rows="3" name="howtocook" placeholder="How to cook" ng-model="foodhowtocook" ng-required="true"></textarea>
<p class="text-danger" ng-show="uploadItem.howtocook.$invalid && uploadItem.howtocook.$touched">This field is required</p>
</div>
<div class="form-group">
<label>Video</label>
<input type="text" name="video" class="form-control" placeholder="Youtube embed link" ng-model="foodvideo" ng-required="true">
<p class="text-danger" ng-show="uploadItem.video.$invalid && uploadItem.video.$touched">This field is required</p>
</div>
<button type="submit" class="btn btn-primary btn-block" ng-disabled="uploadItem.$invalid">Submit</button><br>
</form>
</div>
Thanks for trying to help me. I figure out the way to fix this issue but it's weird.
To get the form validation work I just need to change the form name
from
<form name="uploadItem" ng-submit="uploadItem()" novalidate>
to
<form name="uploadForm" ng-submit="uploadItem()" novalidate>
and correct the following in other input tags like:
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Food name" ng-model="foodname" ng-required="true">
<p class="text-danger" ng-show="uploadForm.name.$invalid && uploadForm.name.$touched">This field is required</p>
</div>
However, it now get to other error.
This is my angular code:
$scope.uploadItem = function(){
recipesInfo.$add({
name: $scope.foodname,
category: $scope.foodcategory,
image: $scope.foodimage,
howtocook:$scope.foodhowtocook,
video:$scope.foodvideo,
date: firebase.database.ServerValue.TIMESTAMP
}).then(function(){
$scope.foodname = '';
$scope.foodimage = '';
$scope.foodcategory = '';
$scope.foodhowtocook = '';
$scope.foodvideo = '';
$scope.message = 'Success!';
});//promise
}//uploadItem
I push all of the data into Firebase then reset the input fields into blank with
.then(function(){
$scope.foodname = '';
$scope.foodimage = '';
$scope.foodcategory = '';
$scope.foodhowtocook = '';
$scope.foodvideo = '';
$scope.message = 'Success!';
});//promise
But after hitting the submit button, although data is being pushed into Firebase and input fields reset to blank, this one show up
<p class="text-danger" ng-show="uploadForm.name.$invalid && uploadForm.name.$touched">This field is required</p>
I want after hitting the submit button, the form will be reset without any error message
I am trying to show error message after validation. Backend is php and it is returning the data i can see that in network tab.
Here are the codes.
function formRegister($scope, $http) {
// create a blank object to hold our form information
// $scope will allow this to pass between controller and view
$scope.formData = {};
$scope.registerForm = function() {
$http({
method : 'POST',
url : 'registerexec.php',
data : $.param($scope.formData), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
console.log(data);
if (!data.success) {
// if not successful, bind errors to error variables
//{{$scope.errorFname}}
$scope.erroracType = data.errors.actype;
$scope.errorFname = data.errors.Fname;
$scope.errorLname = data.errors.Lname;
$scope.errorEmail1 = data.errors.email1;
$scope.errorPassword1 = data.errors.password1;
$scope.errormobile = data.errors.mobile;
$scope.message1 = data.message1;
}
});
};
}
Here is the form.
<div class="feature-box wow animated flipInX animated">
<div id="validation-errorss" ng-show="message1" ><div class="alert alert-danger"><strong >{{ message1 }}</strong><div></div></div>
</div>
<div class="panel-body" id="success"></div>
<font size="4" color="#fff">Register</font>
<form name="register" method="post" id="register" role="form" ng-submit="registerForm()">
<div class="form-group" ng-class="{ 'has-error' : erroractype }">
<select id="actype" name="actype" class=" selector form-control" ng-model="formData.actype" required="required">
<option value="" selected="selected" >I am</option>
<option value="1">a user</option>
<option value="2">an admin</option>
</select>
<span class="help-block" ng-show="errorName">{{ erroractype }}</span>
</div>
<div class="form-group" ng-class="{ 'has-error' : errorFname }">
<input type="text" id="fname" name="fname" placeholder="First Name" title="Please Enter Your First Name" class="form-control input-sm textbox1" required="required" ng-model="formData.Fname">
<span class="help-block" ng-show="errorFName">{{ errorFname }}</span>
</div>
<div class="form-group" ng-class="{ 'has-error' : errorLname }">
<input type="text" id="lname" name="lname" placeholder="Last Name" title="Please Enter Your Last Name" class="form-control input-sm textbox1" required="required" ng-model="formData.Lname">
<span class="help-block" ng-show="errorLName">{{ errorLname }}</span>
</div>
<div class="form-group" ng-class="{ 'has-error' : errorEmail1 }">
<input type="email" id="email1" name="email1" placeholder="Email" class="form-control input-sm textbox1" title="Please Enter Your Valid Email" required="required" ng-model="formData.Email1">
<span class="help-block" ng-show="errorEmail1">{{ errorEmail1 }}</span>
</div>
<div class="form-group" ng-class="{ 'has-error' : errorPassword1 }">
<input type="password" name="password1" id="password1" placeholder="Password" title="Please enter AlphaNumeric value" class="form-control input-sm textbox1" required="required" ng-model="formData.Password1">
<span class="help-block" ng-show="errorPassword1">{{ errorPassword1 }}</span>
</div>
<div class="form-group" ng-class="{ 'has-error' : errormobile }">
<input type="text" id="mobile" name="mobile" placeholder="Mobile Number (Without +91)" title="Please Enter Your Contact Number without Coutry Code." class="form-control input-sm textbox1" required="required" ng-model="formData.mobile">
<span class="help-block" ng-show="errormobile">{{ errormobile }}</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-home" name="btn-register" id="btn-register" required="required">Register</button>
</div>
</form>
Problem is when form get validated in backend. The array messages are not showing in .
Here are the validation errors which found in firebug.
errors:Object Fname:"Your First name must be between 3 to 30
characters!" Lname:"Your Last name must be between 3 to 30
characters!" Password1:"Your password must be between 6 to 30
characters!" success:false
Add novalidate attribute to form tag
<form novalidate>
You might use this if you plan to do your own client-side validation, if you want to create your own validation bubbles, or if you plan to go all server-side validation (which you need to do anyway).
Can anyone tell me why my validation is being ignored?
Here is my form:
<form name="contactForm" role="form" ng-submit="controller.submit()" novalidate>
<div class="form-group" ng-class="{ 'has-error' : contactForm.fullName.$invalid && !contactForm.fullName.$pristine }">
<input class="form-control" type="text" name="fullName" placeholder="Full name" ng-model="controller.model.fullName" required />
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
<input class="form-control" type="text" name="email" placeholder="Email address" ng-model="controller.model.email" required />
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.phoneNumber.$invalid && !contactForm.phoneNumber.$pristine }">
<input class="form-control" type="text" name="phoneNumber" placeholder="Phone number" ng-model="controller.model.phoneNumber" required />
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.orderQuantity.$invalid && !contactForm.orderQuantity.$pristine }">
<select class="form-control" name="orderQuantity" ng-model="controller.model.orderQuantity">
<option disabled selected>Order quantity</option>
<option>10+</option>
<option>20+</option>
<option>30+</option>
<option>40+</option>
</select>
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.country.$invalid && !contactForm.country.$pristine }">
<input class="form-control" type="text" name="country" placeholder="Country" ng-model="controller.model.country" required />
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Message" ng-model="controller.model.message"></textarea>
</div>
<div class="form-group">
<div class="recaptcha" theme="dark" vc-recaptcha key="'6Lcc0AgTAAAAAIpcEqqDI3Ko8dZ05H-GGgUnfOvA'"></div>
</div>
<div class="form-group">
<button class="btn btn-primary">Send</button>
</div>
</form>
I set up a codepen here:
http://codepen.io/r3plica/pen/XbzyzQ?editors=101
you should check whether form is submitted or not using contactForm.$submitted.
After form submission the formController object is get updated and various parameter of each controll's model are get updated and then you can validate your data.
you have not checked this in your form validation.
The updated html is
<div class="container" ng-app="validationExample">
<div class="row" ng-controller="ValidationController as controller">
<form style="margin-top: 20px;" name="contactForm" role="form" ng-submit="controller.submit()" novalidate>
<div class="form-group" ng-class="{ 'has-error' : contactForm.fullName.$invalid && contactForm.$submitted }">
<input class="form-control" type="text" name="fullName" placeholder="Full name" ng-model="controller.model.fullName" required />
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && contactForm.$submitted }">
<input class="form-control" type="email" name="email" placeholder="Email address" ng-model="controller.model.email" required />
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.phoneNumber.$invalid && contactForm.$submitted }">
<input class="form-control" type="tel" name="phoneNumber" placeholder="Phone number" ng-model="controller.model.phoneNumber" required />
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.$submitted && contactForm.orderQuantity.$invalid && contactForm.orderQuantity.$error.required }">
<select class="form-control" required name="orderQuantity" ng-model="controller.model.orderQuantity">
<option disabled selected>Order quantity</option>
<option>10+</option>
<option>20+</option>
<option>30+</option>
<option>40+</option>
</select>
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.country.$invalid && contactForm.$submitted}">
<input class="form-control" type="text" name="country" placeholder="Country" ng-model="controller.model.country" required />
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Message" ng-model="controller.model.message"></textarea>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
Here is the updated code codepen
Also instead of $invalid you can use required to validate the fields.Also you can use regular expression to put your custom validation rule.
e.g.
<input name="first_name" class="form-control" required type="text" ng-model="NewUser.first_name" ng-pattern="/^[A-Za-z]+[0-9]*$/" />
<span ng-show="newuser.first_name.$error.pattern">This is not valid <b>Last name</b></span>
Actually the validation is not ignored. In your codepen code, input whatever text and remove to empty. Then switch to another input element. The has-error class is added.
Because you are checking through $dirty, which is by default false if you do not alter any input text (https://docs.angularjs.org/api/ng/type/form.FormController):
$dirty boolean
True if user has already interacted with the form.
I added ng-minlength=5 to your code: http://codepen.io/anon/pen/xGPmqR:
<div class="form-group" ng-class="{ 'has-error' : contactForm.fullName.$invalid && contactForm.fullName.$dirty }">
<input class="form-control" type="text" name="fullName" placeholder="Full name" ng-model="controller.model.fullName" required ng-minlength=5 />
</div>
As you input any text, the ng-minlength rules is working.
I have a form with credit card fields and billing address fields. It's bound to some angular models and works beautifully, until I try to fill in the form fields with password managers (I tried 1Password and RoboForm).
With the form below, I see the following behavior:
1Password: credit card info is entered correctly, but it also puts in the credit card number in the name, company, and street address fields, and the expiration month in city and state.
RoboForm: fills the CVC field with the expiration year and the zip code field with the state
Here is the form:
<form class="form" rc-submit="submitCC()" name="ccForm" id="ccForm" novalidate>
<div class="cardback">
<div class="title">Credit Card Details</div>
<div class="form-row with-label" ng-class="{'has-error': numberInvalid || (ccForm.ccNumber.$invalid && rc.ccForm.attempted)}">
<input id="cc-number" class="form-control" type="text" name="ccNumber" ng-model="card.number" data-stripe="number" required size="20" autocomplete="cc-number" />
<label class="form-label">card number</label>
<div class="validation-error" ng-show="numberInvalid">the credit card number is invalid</div>
</div>
<div class="form-row for-inline">
<div class="form-row inline with-label month" ng-class="{'has-error': ccForm.ccExpMonth.$invalid && rc.ccForm.attempted}">
<select id="cc-exp-month" class="form-control" ng-model="card.expMonth" name="ccExpMonth" data-stripe="exp-month" ng-options="m for m in expMonths" required autocomplete="cc-exp-month">
<option value="">MM</option>
</select>
<label class="form-label">exp month</label>
<div class="select-arrow"></div>
</div>
<div class="form-row inline with-label year" ng-class="{'has-error': ccForm.ccExpYear.$invalid && rc.ccForm.attempted}">
<select id="cc-exp-year" class="form-control" ng-model="card.expYear" name="ccExpYear" data-stripe="exp-year" ng-options="y for y in expYears" required autocomplete="cc-exp-year">
<option value="">YYYY</option>
</select>
<label class="form-label">exp year</label>
<div class="select-arrow"></div>
</div>
<div class="form-row inline with-label cvc" ng-class="{'has-error': ccForm.ccCsc.$invalid && rc.ccForm.attempted}">
<input id="csc" class="form-control" type="text" name="csc" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/>
<label class="form-label">cvc</label>
</div>
<!--
<input id="cc-csc" class="form-control" type="text" name="ccCsc" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/>
<input id="securityCode" class="form-control" type="text" name="securityCode" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/>
<input id="csc" class="form-control" type="text" name="csc" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/>
<input id="cvc" class="form-control" type="text" name="cvc" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/>
<input id="cardCode" class="form-control" type="text" name="cardCode" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/>
<input id="code" class="form-control" type="text" name="code" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/>
-->
</div>
</div>
<div class="billing-title">Billing Address</div>
<div class="form-row with-label" ng-class="{'has-error': ccForm.name.$invalid && rc.ccForm.attempted}">
<input id="name" class="form-control" type="text" name="name" required ng-model="card.billingName" autocomplete="name"/>
<label class="form-label">name</label>
<div class="validation-error" ng-show="ccForm.name.$invalid && rc.ccForm.attempted">name required</div>
</div>
<div class="form-row with-label" ng-class="{'has-error': ccForm.organization.$invalid && rc.ccForm.attempted}">
<input id="organization" class="form-control" type="text" name="organization" ng-model="card.billingCompany" autocomplete="organization"/>
<label class="form-label">company (optional)</label>
</div>
<div class="form-row with-label" ng-class="{'has-error': ccForm.addressLine1.$invalid && rc.ccForm.attempted}">
<input id="address-line1" class="form-control" type="text" name="addressLine1" required ng-model="card.billingAddress" autocomplete="address-line1"/>
<label class="form-label">street address</label>
<div class="validation-error" ng-show="ccForm.addressLine1.$invalid && rc.ccForm.attempted">address required</div>
</div>
<div class="form-row with-label" ng-class="{'has-error': ccForm.addressCity.$invalid && rc.ccForm.attempted}">
<input id="address-level2" class="form-control" type="text" name="addressCity" required ng-model="card.billingCity" autocomplete="address-level2"/>
<label class="form-label">city</label>
<div class="validation-error" ng-show="ccForm.addressCity.$invalid && rc.ccForm.attempted">city required</div>
</div>
<div class="form-row for-inline">
<div class="form-row inline with-label state" ng-class="{'has-error': ccForm.state.$invalid && rc.ccForm.attempted}">
<input id="address-level1" class="form-control" type="text" name="state" ng-model="card.billingState" autocomplete="address-level1"/>
<label class="form-label">state</label>
</div>
<div class="form-row inline with-label zip" ng-class="{'has-error': ccForm.postalCode.$invalid && rc.ccForm.attempted}">
<input id="zip" class="form-control" type="text" name="zip" required ng-model="card.billingZip" autocomplete="postal-code"/>
<label class="form-label">zip</label>
<div class="validation-error" ng-show="ccForm.postalCode.$invalid && rc.ccForm.attempted">zip required</div>
</div>
<!--
<input id="postal-code" class="form-control" type="text" name="postalCode" required ng-model="card.billingZip" autocomplete="postal-code"/>
<input id="zipCode" class="form-control" type="text" name="zipCode" required ng-model="card.billingZip" autocomplete="postal-code"/>
<input id="zip" class="form-control" type="text" name="zip" required ng-model="card.billingZip" autocomplete="postal-code"/>
-->
<div class="form-row inline with-label country" ng-class="{'has-error': ccForm.countryName.$invalid && rc.ccForm.attempted}">
<input id="country-name" class="form-control" type="text" name="countryName" value="USA" required ng-model="card.billingCountry" autocomplete="country-name"/>
<label class="form-label">country</label>
<div class="validation-error" ng-show="ccForm.countryName.$invalid && rc.ccForm.attempted">country required</div>
</div>
</div>
<div class="form-row spaced">
<button class="constructive" type="submit" ng-disabled="ccInProgress">confirm payment</button>
</div>
</form>
I tried several different ways to format the fields, including various name and id attributes, as well as the autocomplete field as defined here: https://html.spec.whatwg.org/multipage/forms.html#autofill. Chrome seems to understand the autocomplete attribute pretty well.
I also tried adding multiple variations of the CVC and zip code fields for testing, and if I have a multitude of these fields, RoboForm works correctly. But as soon as I remove all but any one of those fields, it stops working.
Any experience with that or links to documentation would be greatly appreciated.
1Password will respect HTML's autofill spec so <input type="text" id="ccexp" autocomplete="cc-exp" /> will hint 1Password to fill the selected credit card's expiry.
Having proper labels is helpful, you can either use <label for="ccexp">Expiry Date:</label><input type="text" id="ccexp" ...> or <label>Expiry Date: <input type="text" ...></label>.
autocomplete is preferred since it will help with more than just 1Password's filling.
Objective : Only want user to click once not multiple times on a rating system
<div class="votingButton" ng-click="upVoteOrder(order)">
</div>
is this easily achievable on the html or the controller ?
Have a scope variable to check if the Vote button is clicked..! if once clicked update the scope variable so that it gets disabled. The scope variable can be an attribute in the user model so that it carries ahead.
Try this:
<button class="votingButton" ng-click="upVoteOrder(order)" ng-disabled="buttonClicked"></button>
and inside the upVoteOrder function add:
$scope.buttonClicked = true;
A simple way is to add key and value to the order object in the controller. <button type="button" ng-click="upVoteOrder(order)">vote up</button>
///ctrl.js
$scope.upVoteOrder = function (order) {
var voted = true;
var votedValue = 'Up vote complete!';
order.voted = voted;
order.votedValue = votedValue;
}
if order.voted is true disabled the button
<!-- index.html -->
<div>
<button type="button" ng-click="upVoteOrder(order)" ng-disabled="order.voted">vote up</button>
<p ng-if="order.voted">{{ order.votedValue }}. Thank you for voting!</p>
</div>
You can use us ng-if to hide the html altogether once a click is registered. That way, you don't need to create a button to benefit from what ng-disabled does. The Angular 2 way of doing it is:
<div *ngIf="upVoted(order)"...
Use a function that returns true for index value of your *ngFor loop.
<div class="container ">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<form #ref="ngForm" (ngSubmit)="addfirst(ref3.value)">
<!-- GENERAL -->
<div *ngIf="!b"> <h3 class="text-primary">GENERAL</h3>
<div class="form-group">
<label>EMP NUMBER</label>
<input type="number" class="form-control round3 " id="empno" placeholder=" Emp Number"
name="empnober" ngModel #ref1="ngModel" required>
<label *ngIf="ref1.invalid && ref1.touched ">
<div class="text-danger"> *emp num field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> FIRST NAME</label>
<input type="text" class="form-control round3 " id="firstname" placeholder="FIRST NAME" name="firstname"
ngModel #ref2="ngModel" required>
<label *ngIf="ref2.invalid && (ref2.dirty || ref2.touched )">
<div class="text-danger"> *firstname field is mandatory </div>
</label>
</div>
<div class="form-group">
<div class="LAST NAME">
<label>LAST NAME </label>
<input type="text" class="form-control round3 " id="lastname" placeholder="LAST NAME " name="lastname" ngModel
#ref3="ngModel" required>
<label *ngIf="ref3.invalid && (ref3.dirty || ref3.touched )">
<div class="text-danger"> *last name field is mandatory </div>
</label>
</div>
</div>
<div class="form-group">
<label> MIDDLE NAME </label>
<input type="text" class="form-control round3 " id="middlename" placeholder="MIDDLE NAME " name="middlename" ngModel
#ref4="ngModel" required>
<label *ngIf="ref4.invalid && (ref4.dirty || ref4.touched )">
<div class="text-danger"> *middle name field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> ADDRESS </label>
<input type="text" class="form-control round3 " id="address" placeholder="ADDRESS" name="address" ngModel
#ref5="ngModel" required>
<label *ngIf="ref5.invalid && (ref5.dirty || ref5.touched )">
<div class="text-danger"> *address field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> ADDRESS 2 </label>
<input type="text" class="form-control round3 " id="address2" placeholder="ADDRESS 2" name="address2" ngModel
#ref6="ngModel" required>
<label *ngIf="ref6.invalid && (ref6.dirty || ref6.touched )">
<div class="text-danger"> *address2 field is mandatory </div>
</label>
</div>
<!-- <div class="text-right">
Next ยป
</div> -->
<div >
<div class="form-group">
<label> POST CODE </label>
<input type="number" class="form-control round3 " id="postcode" placeholder=" POSTCODE " name="postcode" ngModel
#ref7="ngModel" required>
<label *ngIf="ref7.invalid && (ref7.dirty || ref7.touched )">
<div class="text-danger"> *postcode field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> CITY </label>
<input type="text" class="form-control round3 " id="city" placeholder="CITY " name="city" ngModel
#ref8="ngModel" required>
<label *ngIf="ref8.invalid && (ref8.dirty || ref8.touched )">
<div class="text-danger"> *city field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> PHONE NUMBER </label>
<input type="number" class="form-control round3 " id="phnumber" placeholder="PHONE NUMBER " name="phnumber" ngModel
#ref9="ngModel" required>
<label *ngIf="ref9.invalid && (ref9.dirty || ref9.touched )">
<div class="text-danger"> *phone number field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> MOBILE NUMBER </label>
<input type="number" class="form-control round3 " id="mblnumber" placeholder="MOBILE NUMBER " name="mblnumber" ngModel
#ref10="ngModel" required>
<label *ngIf="ref10.invalid && (ref10.dirty || ref10.touched )">
<div class="text-danger"> *mobilenumber field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> REPORTING TO </label>
<input type="text" class="form-control round3 " id="reportingto" placeholder=" REPORTING TO " name="reportingto" ngModel
#ref11="ngModel" required>
<label *ngIf="ref11.invalid && (ref11.dirty || ref11.touched )">
<div class="text-danger"> *reporting to field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> REPORTING NAME </label>
<input type="text" class="form-control round3 " id="reportingname" placeholder="REPORTING NAME" name="reportingname" ngModel
#ref12="ngModel" required>
<label *ngIf="ref12.invalid && (ref12.dirty || ref12.touched )">
<div class="text-danger"> *reporting name field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> GENDER </label>
<input type="radio" value="male" name="gender" [(ngModel)]="gender" #ref13="ngModel" required #genderControl="ngModel"> Male
<input type="radio" value="female" name="gender" [(ngModel)]="gender" #ref13="ngModel" required> Female
<input type="radio" value="others" name="gender" [(ngModel)]="gender" #ref13="ngModel" required> others
<label *ngIf="ref13.invalid && (ref13.dirty || ref13.untouched )">
<div class="text-danger"> *select gender mandatory </div>
</label>
</div>
<div class="form-group">
<label> LOCATION CODE </label>
<input type="text" class="form-control round3 " id="lctncode" placeholder="LOCATION CODE" name="lctncode" ngModel
#ref14="ngModel" required>
<label *ngIf="ref14.invalid && (ref14.dirty || ref14.touched )">
<div class="text-danger"> *location code field is mandatory </div>
</label>
</div>
<div class="text-right">
<button class="btn btn-success" type="button" (click)="next()">Next</button> </div>
</div>
</div>
</form>
<!-- COMMUNICATION -->
<form #ref1="ngForm">
<div *ngIf="b && !communication" >
<h3 class="text-primary">COMMUNICATION</h3>
<div class="form-group">
<label> PHONE NUMBER </label>
<input type="number" class="form-control round3 " id="phnumber" placeholder="PHONE NUMBER " name="phnumber" ngModel
#ref15="ngModel" required>
<label *ngIf="ref15.invalid && (ref15.dirty || ref15.touched )">
<div class="text-danger"> *phone number field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> MOBILE NUMBER </label>
<input type="number" class="form-control round3 " id="mblnumber" placeholder="MOBILE NUMBER " name="mblnumber" ngModel
#ref16="ngModel" required>
<label *ngIf="ref16.invalid && (ref16.dirty || ref16.touched )">
<div class="text-danger"> *mobilenumber field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> E-MAIL </label>
<input type="email" class="form-control round3 " id="email" placeholder="E-MAIL ADDRESS" name="email" ngModel
#ref17="ngModel" required>
<label *ngIf="ref17.invalid && (ref17.dirty || ref17.touched )">
<div class="text-danger"> *email field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> COMPANY E-MAIL </label>
<input type="email" class="form-control round3 " id="cemail" placeholder="COMPANY E-MAIL ADDRESS" name="cemail" ngModel
#ref18="ngModel" required>
<label *ngIf="ref18.invalid && (ref18.dirty || ref18.touched )">
<div class="text-danger"> *company email field is mandatory </div>
</label>
</div>
<div class="text-right">
<button class="btn btn-success" type="button" (click)="secondNext()">Next</button>
</div>
</div>
</form>
<!-- ADMINISTRATION -->
<form #ref2="ngForm">
<div *ngIf="communication && !administration">
<h3 class="text-primary">ADMINISTRATION</h3>
<div class="form-group">
<label>DESIGNATION </label>
<input type="text" class="form-control round3 " id="designation" placeholder="DESIGNATION" name="designation" ngModel
#ref19="ngModel" required>
<label *ngIf="ref19.invalid && (ref19.dirty || ref19.touched )">
<div class="text-danger"> *designation field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>QUALIFICATION </label>
<input type="text" class="form-control round3 " id="qualification" placeholder="QUALIFICATION" name="qualification" ngModel
#ref20="ngModel" required>
<label *ngIf="ref19.invalid && (ref20.dirty || ref20.touched )">
<div class="text-danger"> *qualification field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>HEIGHT </label>
<input type="number" class="form-control round3 " id="height" placeholder="HEIGHT" name="height" ngModel
#ref21="ngModel" required>
<label *ngIf="ref21.invalid && (ref21.dirty || ref21.touched )">
<div class="text-danger"> *height field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> WEIGHT </label>
<input type="number" class="form-control round3 " id="weight" placeholder="WEIGHT" name="weight" ngModel
#ref22="ngModel" required>
<label *ngIf="ref22.invalid && (ref22.dirty || ref22.touched )">
<div class="text-danger"> *weight field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> EXPERIENCE </label>
<input type="number" class="form-control round3 " id="experience" placeholder="EXPERIENCE" name="experience" ngModel
#ref23="ngModel" required>
<label *ngIf="ref23.invalid && (ref23.dirty || ref23.touched )">
<div class="text-danger"> *experience field is mandatory </div>
</label>
</div>
<div class="text-right">
<button class="btn btn-success" type="button" (click)="thirdNext()">Next</button>
</div>
</div>
</form>
<!-- PERSONAL -->
<form #ref2="ngForm">
<div *ngIf="administration && !paymethod">
<h3 class="text-primary" >PERSONAL</h3>
<div class="form-group">
<label> DATE OF BIRTH</label>
<input type="date" class="form-control round3 " id="dob" placeholder="DATE OF BIRTH" name="dob" ngModel
#ref24="ngModel" required>
<label *ngIf="ref24.invalid && (ref24.dirty || ref24.touched )">
<div class="text-danger"> *date of birth field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> FATHER/HUSBAND NAME </label>
<input type="text" class="form-control round3 " id="fhname" placeholder="FATHER/HUSBAND NAME" name="fhname" ngModel
#ref25="ngModel" required>
<label *ngIf="ref25.invalid && (ref25.dirty || ref25.touched )">
<div class="text-danger"> *father/husband field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> CURRENT AGE (YEARS)</label>
<input type="number" class="form-control round3 " id="cage" placeholder="CURRENT AGE (YEARS)" name="cage" ngModel
#ref26="ngModel" required>
<label *ngIf="ref26.invalid && (ref26.dirty || ref26.touched )">
<div class="text-danger"> *current age (years) field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> CURRENT AGE (MONTHS)</label>
<input type="number" class="form-control round3 " id="cagem" placeholder="CURRENT AGE (MONTHS)" name="cagem" ngModel
#ref27="ngModel" required>
<label *ngIf="ref27.invalid && (ref27.dirty || ref27.touched )">
<div class="text-danger"> *current age (months) field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> BLOOD GROUP</label>
<input type="text" class="form-control round3 " id="bloodgrp" placeholder="BLOOD GROUP" name="bloodgrp" ngModel
#ref28="ngModel" required>
<label *ngIf="ref28.invalid && (ref28.dirty || ref28.touched )">
<div class="text-danger"> *bloodgroup field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> NATIONALITY</label>
<input type="text" class="form-control round3 " id="nationality" placeholder="NATIONALITY" name="nationality" ngModel
#ref29="ngModel" required>
<label *ngIf="ref29.invalid && (ref29.dirty || ref28.touched )">
<div class="text-danger"> *nationality field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> PRESENT ADDRESS </label>
<input type="text" class="form-control round3 " id="paddress" placeholder="PRESENT ADDRESS" name="paddress" ngModel
#ref30="ngModel" required>
<label *ngIf="ref30.invalid && (ref30.dirty || ref30.touched )">
<div class="text-danger"> *presentaddress field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>PRESENT ADDRESS 2 </label>
<input type="text" class="form-control round3 " id="paddress2" placeholder="PRESENT ADDRESS 2" name="paddress2" ngModel
#ref31="ngModel" required>
<label *ngIf="ref31.invalid && (ref31.dirty || ref31.touched )">
<div class="text-danger"> *presentaddress2 field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>PRESENT CITY</label>
<input type="text" class="form-control round3 " id="pcity" placeholder="PRESENT CITY" name="pcity" ngModel
#ref32="ngModel" required>
<label *ngIf="ref32.invalid && (ref32.dirty || ref32.touched )">
<div class="text-danger"> *presentcity field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>PRESENT POST CODE </label>
<input type="number" class="form-control round3 " id="pccode" placeholder="PRESENT CITY CODE" name="pccode" ngModel
#ref33="ngModel" required>
<label *ngIf="ref33.invalid && (ref33.dirty || ref33.touched )">
<div class="text-danger"> *presentcitycode field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>PRESENT COUNTRY</label>
<input type="text" class="form-control round3 " id="pcountry" placeholder="PRESENT COUNTRY" name="pcountry" ngModel
#ref34="ngModel" required>
<label *ngIf="ref34.invalid && (ref34.dirty || ref34.touched )">
<div class="text-danger"> *presentcountry field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>PRESENT PHONE NUMBER</label>
<input type="number" class="form-control round3 " id="pphnno" placeholder="PRESENT PHONE NUMBER" name="pphnno" ngModel
#ref35="ngModel" required>
<label *ngIf="ref35.invalid && (ref35.dirty || ref35.touched )">
<div class="text-danger"> *presentphonenumber field is mandatory </div>
</label>
</div>
<div class="form-group">
<label>ADDHAAR NUMBER</label>
<input type="number" class="form-control round3 " id="aadhaar" placeholder="ADDHAAR NUMBER" name="aadhaar" ngModel
#ref36="ngModel" required>
<label *ngIf="ref36.invalid && (ref36.dirty || ref36.touched )">
<div class="text-danger"> *aadhaar field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> PAN NUMBER </label>
<input type="text" class="form-control round3 " id="pannumber" placeholder=" PAN NUMBER " name="pannumber" ngModel
#ref41="ngModel" required>
<label *ngIf="ref41.invalid && (ref41.dirty || ref41.touched )">
<div class="text-danger"> *pan number field is mandatory </div>
</label>
</div>
<div class="text-right">
<button class="btn btn-success" type="button" (click)="fourthNext()">Next</button>
</div>
</div>
</form>
<form #ref3="ngForm">
<!-- pay method -->
<div *ngIf="paymethod">
<h3 class="text-primary"> PAY METHOD </h3>
<div class="form-group">
<label> BANK NAME </label>
<input type="text" class="form-control round3 " id="bankname" placeholder="BANK NAME" name="bankname" ngModel
#ref37="ngModel" required>
<label *ngIf="ref37.invalid && (ref37.dirty || ref37.touched )">
<div class="text-danger"> *bankname field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> BANK IFSC CODE </label>
<input type="text" class="form-control round3 " id="bankifsccode" placeholder="BANK IFSC CODE" name="bankifsccode" ngModel
#ref38="ngModel" required>
<label *ngIf="ref38.invalid && (ref38.dirty || ref38.touched )">
<div class="text-danger"> *bankifsccode field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> ACCOUNT TYPE</label>
<input type="text" class="form-control round3 " id="accounttype" placeholder="ACCOUNT TYPE" name="accounttype" ngModel
#ref39="ngModel" required>
<label *ngIf="ref39.invalid && (ref39.dirty || ref39.touched )">
<div class="text-danger"> *accounttype field is mandatory </div>
</label>
</div>
<div class="form-group">
<label> ACCOUNT NUMBER </label>
<input type="text" class="form-control round3 " id="accountnumber" placeholder=" ACCOUNT NUMBER " name="accountnumber" ngModel
#ref40="ngModel" required>
<label *ngIf="ref40.invalid && (ref40.dirty || ref40.touched )">
<div class="text-danger"> *accountnumber field is mandatory </div>
</label>
</div>
<div class="text-right">
<button class="btn btn-success" type="submit">submit</button>
</div>
</div>
</form>
</div>