This might be a silly question. But I just started experimenting with AngularJS. Can someone point out what I'm doing wrong in validation. The button is not disabled even when the fields are invalid.
What's the difference between
ng-disabled="myForm.$invalid" and
ng-disabled="myForm.cuisine.$invalid || myForm.title.$invalid || myForm.description.$invalid || myForm.cost.$invalid"
I think using myForm.$invalid is a cleaner way of disabling the button. Any tips?
<form name="myForm">
<div class="form-group">
<select ng-required="true" name="cuisine" ng-model="model.food.cuisine" class="form-control" type="text">
<option ng-repeat="c in model.cuisines" value="{{c}}">{{c}}</option>
</select>
<p ng-show="myForm.cuisine.$invalid && myForm.cuisine.$touched">
Please select cuisine type.</p>
</div>
<div class="form-group">
<input ng-required="true" name="title" ng-minlength="4" ng-maxlength="25" ng-model="model.food.title"
type="text" class="form-control">
<p ng-show="myForm.title.$invalid && myForm.title.$touched">Please pick a valid title with atleast 4
characters.</p>
</div>
<div class="form-group">
<textarea ng-required="true" name="description" ng-minlength="10" ng-maxlength="255"
ng-model="model.food.description" type="text" class="form-control"></textarea>
<p ng-show="myForm.description.$valid && myForm.description.$touched">Please describe your food with 10 - 255
characters.</p>
</div>
<div class="form-group">
<input name="cost" ng-pattern="/0-9/" ng-required="true" min="1" ng-model="model.food.cost" type="number"
class="form-control" placeholder="Cost">
<p ng-show="myForm.cost.$error.pattern">Please enter a valid number</p>
<p ng-show="myForm.cost.$invalid && myForm.cost.$touched">Please enter cost of food item.</p>
</div>
<div class="form-group">
<button ng-disabled="myForm.$invalid" class="btn btn-success btn-block">Add Food</button>
</div>
</form>
Apparently, validations don't work if the form element is inside the body of a table.
It works fine if I moved the form tag outside the table.
Thanks everyone.
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
">
<ion-content>
<h3 class="style3"><strong>Message</strong></h3>
<form name="form1">
<div class="list">
<label class="item item-input" >
<input type="text" placeholder="Enter Number"ng-blur='SendInvit()' ng-model="message.name" name="phone" ng-required="true" />
<span class="error-message" ng-show="form1.phone.$dirty&&form1.phone.$invalid"> </span>
</label>
<input type="text" rows="4" cols="" placeholder="Write Your Message"
class="area" name="phone" ng-model="message.description" ng-maxlength=
"{{maxLength}}" ng-change="updateBody();" ng-required="true">
<span class="error-message" ng-show="form1.phone.$dirty &&form1.phone.$invalid"></span>
<div id="characters">
<span>Characters left: {{maxLength - message.description.length}}</span>
Send
Cancel
Below is the plunker of my work.Please help me with the code
http://plnkr.co/edit/NDGeMcqzpbIqwd8sr5jM
Used ng-disabled when the form is invalid with ng-maxlength. Set the maxlength from your controller.
Max-length:
ng-maxlength="maxlength"
Ng-disabled
ng-disabled="form1.phone.$invalid"
Here is a working example.
https://plnkr.co/edit/FC4vXw1311pnMee8d2Lz?p=preview
if you want simple solution use maxlength="10"!
Good luck.
I am beginner in AngularJS. So I faced little bit confusion this language. Please check my code:
<form class="form-horizontal" ng-submit="productFormForm.$valid && submitProductForm()" novalidate="" name="productFormForm">
<label for="from_id_dropdown">Templates</label>
<select class="form-control" name="from_id_dropdown" id="from_id_dropdown" ng-model="formData.form_id" ng-change="getDropdownOptions(formData.form_id)" ng-options="option.id as option.name for option in forms_dropdown.availableOptions" required="">
<option value="">Select Template</option>
</select>
<div ng-show="productFormForm.$submitted || productFormForm.from_id_dropdown.$touched" class="">
<span style="color:red;" ng-show="productFormForm.from_id_dropdown.$error.required">Template is required.</span>
</div>
</form>
<form class="form-horizontal" ng-submit="attributeForm.$valid && submitForm()" novalidate="" name="attributeForm">
<label class="tooltip-demo">Label</label>
<input type="text" name="attribute_lebel" ng-model="attr_value.label" class="form-control" placeholder="Label Name" required="">
<div ng-show="attributeForm.$submitted || attributeForm.attribute_lebel.$touched" class="">
<span class="text-danger" ng-show="attributeForm.attribute_lebel.$error.required">Label is required.</span>
</div>
<button class="btn btn-w-m btn-success" type="submit">Save</button>
</form>
Here is two form productFormForm and attributeForm But one submit button which is 2nd form. I want to validate both form those fields are blank.
You can validate both forms using js - example
or in html add <span> after your button -
<span ng-show="attributeForm.attribute_lebel.$error.required || productFormForm.from_id_dropdown.$error.required"> Form not valid</span>
Angular seems to not be raising minLength or maxLength error in the below code... the required error (as well as the email error) is working however. I know ng-minlength and ng-maxlength is working because the input box is changing its CSS. The text inside the <span> is not working for the min or max errors.
See the password input below:
<section class="row" data-ng-controller="AuthenticationController">
<h3 class="col-md-12 text-center">Sign Up</h3>
<div class="col-xs-offset-2 col-xs-8 col-md-offset-5 col-md-2">
<form name="userForm" data-ng-submit="userForm.$valid && signup()" class="signin form-validate" novalidate autocomplete="off">
<fieldset>
<div class="form-group">
<span ng-show="userForm.email.$dirty && userForm.email.$error.required" class="text-danger">This field is required</span>
<span ng-show="userForm.email.$dirty && userForm.email.$error.email" class="text-danger">This field must be a valid email address</span>
</div>
<div class="form-group">
<label for="username" class="control-label">Username</label>
<input type="text" id="username" name="username" class="form-control" data-ng-model="credentials.username" placeholder="Username">
</div>
<div class="form-group">
<label for="password" class="control-label">Password</label>
<input type="password" id="password" name="password" class="form-control" required data-ng-model="credentials.password" ng-minlength="8" ng-maxlength="24" placeholder="Password">
<span ng-show="userForm.password.$dirty && userForm.password.$error.required" class="text-danger">This field is required</span>
<span ng-show="userForm.password.$dirty && userForm.password.$error.minLength" class="text-danger">Please use a password of at least 8 characters</span>
<span ng-show="userForm.password.$dirty && userForm.password.$error.maxLength" class="text-danger">The charactar limit for passwords is 24</span>
</div>
<div class="text-center form-group mt">
<button type="submit" class="btn btn-large btn-primary">Sign up</button> or
Sign in
</div>
<div data-ng-show="error" class="text-center text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
any thoughts on what's gone wrong here?
It was just a syntax error: userForm.password.$error.minLength should have been userForm.password.$error.minlength (capitalization).
You should change && to && inside ng-show expression, you must have getting an error in console.
The updated ng-show version will look something like below.
ng-show="userForm.password.$dirty && userForm.password.$error.required"
The other more convenient way is to use ng-messages directive, to show and hide validation messages based on form & its field validity
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