Have html code like below
<form class="form-horizontal" name="myform">
<div class="modal-body" novalidate>
<div class="form-group" >
<label class="col-sm-2 control-label" for="input-username">Username (*)</label>
<div class="col-sm-10">
<input type="text" name="username" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" placeholder="Username" id="input-username" class="form-control" data-ng-model="newuser.username">
<div class="help-block">Username must be 4-10 characters.</div>
</div>
</div>
</div>
</form>
using ng-pattern copy in an example but it not right work for me, when type in under 4 character, html css not highlight red border, and when type in 4 character css not highlitght green border. I don't know why I can not show right css
Patters arent usually used for checking length... You can do ng-minlength and ng-maxlength for that like this:
<form class="form-horizontal" name="myform">
<div class="modal-body" novalidate>
<div class="form-group" >
<label class="col-sm-2 control-label" for="input-username">Username (*)</label>
<div class="col-sm-10">
<input type="text" name="username" ng-minlength="4" ng-maxlength="10" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" placeholder="Username" id="input-username" class="form-control" data-ng-model="newuser.username">
<div class="help-block" ng-if="myform.$invalid">Username must be 4-10 characters.</div>
</div>
</div>
</div>
</form>
Related
<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.
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 below form:
<form name="commentForm" class="form-horizontal" role="form" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" >Enter Name:</label>
<div class="col-sm-10" show-errors>
<input type="text" class="form-control" id="name" name="name" ng-model="subject.name" placeholder="Enter Name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="comment">Enter comment:</label>
<div class="col-sm-10" show-errors>
<textarea class="form-control" rows="5" id="comment" name="comment" ng-model="subject.text" style="resize: none;" required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button ng-click="submitForm()" type="submit" class="btn btn-default" ng-disabled="commentForm.$invalid">Submit</button>
</div>
</div>
</form>
I have created showErrors directive to show error for required-fields.
But this form validation is not working properly. Although if I am using the same code in some other partials, it is working fine. What could be the possible mistake that I am making here?
I am developing an application where I am using bootstrap and angular together. Form validation using angular and bootstrap is working fine but I have a problem to reset the form. I call $setPristine() but it doesn't seem to be doing anything.
Here is my html.
<div class="cl-xs-12" style="margin-top:20px">
<div class="col-xs-3"></div>
<div ng-controller="AddUpdateUserController" class="col-xs-6">
<form class="form-horizontal" role="form" id="addEditMemberForm" name="addEditMemberForm" ng-submit="addUpdateMember(member)" novalidate>
<input type="hidden" id="mmeberId", name="memberId" ng-model="member.id">
<div class="form-group required" ng-class="{ 'has-error': addEditMemberForm.firstName.$invalid && addEditMemberForm.firstName.$dirty}">
<label for="firstName" class="control-label col-xs-4">First Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" ng-model="member.firstName" ng-pattern="/^[0-9A-Za-z]+$/" required>
<div ng-show="addEditMemberForm.$submitted || addEditMemberForm.firstName.$touched" ng-messages="addEditMemberForm.firstName.$error">
<div ng-show="addEditMemberForm.firstName.$error.required" class="validationErrorMessage">First Name is required</div>
<div class="validationErrorMessage" ng-message="pattern">First name is invalid. Only Alphanumeric characters are allowed</div>
</div>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error': addEditMemberForm.middleName.$invalid && addEditMemberForm.middleName.$dirty}">
<label for="lastName" class="control-label col-xs-4">Middle Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="middleName" name="middleName" placeholder="Middle Name" ng-model="member.middleName" ng-pattern="/^[0-9A-Za-z]+$/" required>
<div ng-show="addEditMemberForm.$submitted || addEditMemberForm.middleName.$touched" ng-messages="addEditMemberForm.middleName.$error">
<div class="validationErrorMessage" ng-message="required">Middle name is required.</div>
<div class="validationErrorMessage" ng-message="pattern">Middle name is invalid. . Only Alphanumeric characters are allowed</div>
</div>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error': addEditMemberForm.lastName.$invalid && addEditMemberForm.lastName.$dirty}">
<label for="lastName" class="control-label col-xs-4">Last Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" ng-model="member.lastName" ng-pattern="/^[0-9A-Za-z]+$/" required>
<div ng-show="addEditMemberForm.$submitted || addEditMemberForm.lastName.$touched" ng-messages="addEditMemberForm.lastName.$error">
<div ng-show="addEditMemberForm.lastName.$error.required" class="validationErrorMessage">Last Name is required</div>
<div class="validationErrorMessage" ng-message="pattern">Last name is invalid. . Only Alphanumeric characters are allowed</div>
</div>
</div>
</div>
</form>
<div class="row">
<label>{{message}}</label>
</div>
<label ng-model="status"></label>
</div>
<div class="col-xs-3"></div>
</div>
Here is my Javascript:
angular.module('SiteControllerModule').controller('AddUpdateUserController', ['$scope', '$http', '$location', function($scope, $http, $location){
$scope.resetForm = function () {
$scope.member = null;
$scope.addEditMemberForm.$setPristine();
}
}]);
When $setPristine is called, my form is still dirty and looks like it left behind my Bootstrap validation Error.
Any help related to this is appreciated.
Thanks
Try this too:
$scope.addEditMemberForm.$setPristine();
$scope.addEditMemberForm.$setUntouched();
i'm using camunda 7.2
In my process i have two user tasks (the first one a simple form to insert data, and the second one to show the same form readonly).
I'm using embedded forms.
I have the following form but i have a problem: using the ng-if directive i don't able to instantiate process variable, while if i use ng-show it works.
<form role="form" name="form" cam-form class="form-horizontal">
<div ng-if="typeRequest == 'firstCase'">
<h4 class="text-center">title</h4>
<!-- Oggetto -->
<div class="form-group">
<label for="oggetto" class="col-sm-4 control-label">Oggetto:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="oggetto" cam-variable-name="oggetto" cam-variable-type="String" required="required">
</div>
</div>
<!-- Nota descrittiva -->
<div class="form-group">
<label for="notadescrittiva" class="col-sm-4 control-label">Nota descrittiva:</label>
<div class="col-sm-8">
<textarea class="form-control" rows="3" id="notadescrittiva" cam-variable-name="notaDescrittiva" cam-variable-type="String"></textarea>
</div>
</div>
<!-- Data -->
<div class="form-group">
<label for="data" class="col-sm-4 control-label">Data:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="data" cam-variable-name="data" cam-variable-type="String" required="required">
</div>
</div>
<!-- Indirizzo -->
<div class="form-group">
<label for="indirizzorichiesta" class="col-sm-4 control-label">Indirizzo:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="indirizzorichiesta" cam-variable-name="indirizzo" cam-variable-type="String" required="required">
</div>
</div>
</div>
Please, any idea?
Thanks in advance
I think this is because ng-if does not renders anything in the DOM.
You probably should use ng-show instead.