I am unable to validate required bootstrap date field in angularjs using ng-required. Here is my code.
<div class="form-group col-md-12">
<label class="control-label col-md-4" style="text-align: left;" for="Date">Date:<span style="color:red;">*</span></label>
<div class="col-md-8">
<div class='input-group date' id='assignWODate'>
<input type='text' class="form-control" ng-model="woAssignedDate" bs-datepicker ng-required="woAssignedDate" ng-readonly="true" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
You cannot do validation ng-required while it is readonly
see fiddle
<form>
<label class="control-label col-md-4" style="text-align: left;" for="Date">Date:<span style="color:red;">*</span></label>
<div class="col-md-8">
<div class='input-group date' id='assignWODate'>
<input type='text' class="form-control" ng-model="woAssignedDate" bs-datepicker ng-required="woAssignedDateIsRequired" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<input type="submit" value="submit">
</form>
I have solved the above issue by including a forceParse: false attribute in my script tag and making it readonly field. No need for any other validation.
$('#assignWODate').datepicker({
autoclose:true,
format: 'mm/dd/yyyy',
todayHighlight: true,
startDate: dt,
forceParse: false
});
Related
How can I use bootstrap modal dialogs with AngularJS using ui-bootstrap with angular-ui-router? I am new to AngularJS and tried searching the documentation without luck.
I have used this code but the contents behind gets covered:
my main.html :
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<img src="img/dsd.png" style="width: 17px">
</button>
</span>
</div>
<a class="btn btn-success" ui-sref="app.login">Login</a>
<a class="btn btn-danger" ui-sref="app.register">Regiter</a>
</form>
my app.js:
angular.module("myApp",["ngAnimate","ngSanitize","ui.router","ui.bootstrap","mds"])
.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state("app",{
url:"/app",
views:{
main:{
templateUrl:"templates/main.html",
controller:"appCtrl"
}
}
})
.state("app.register",{
url:"/register",
views:{
sub:{
templateUrl:"templates/register.html",
controller:"registerCtrl"
}
}
})
my modal:
<div id="y" class="modal-dialog">
<div>
<div class="modal-content">
<div class="modal-header btn-danger">
x
SignUp
</div>
<div class="modal-body">
<form ng-submit="register()">
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" ng-model="Name" required>
</div>
<div class="form-group">
<label>User Name</label>
<input type="text" class="form-control" ng-model="UserName" required>
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="tel" class="form-control" ng-model="Phone" required>
</div>
<div class="form-group">
<label>Full Address</label>
<textarea class="form-control" ng-model="addr" required></textarea>
</div>
<div class="form-group">
<label>Email address:</label>
<input type="email" class="form-control" ng-model="Email" required>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" class="form-control" ng-model="Pwd" required>
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
Sudan Store.
</div>
</div>
</div>
</div>
One approach is to use the appendTo option:
From the Docs:
$uibModal's open function
options parameter
appendTo (Type: angular.element, Default: body: Example: $document.find('aside').eq(0)) - Appends the modal to a specific element.
Use the appendTo option to append to an element that will be fully visible.
For more information, see
UI-Bootstap modal Directive API Reference
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 have used [hidden] as below where "secondTab" value is true.
<form #siteForm="ngForm" novalidate (ngSubmit)="saveSite(siteForm.value,siteForm.valid)" class="admin-modal">
<div class="txt-danger">{{errorMessage}}</div><br/>
<ul role="tablist" class="nav nav-tabs">
<li [ngClass]="{active:firstTab}"><a (click)="siteDetail()">Site Details</a></li>
<li [ngClass]="{active:secondTab}"><a (click)="siteLocation()">Site Location</a></li>
</ul>
<div [hidden]="secondTab">
<input type="hidden" class="form-control" value="{{site.location}}" name="location" [(ngModel)]="site.location" #location>
<input type="hidden" class="form-control" value="{{site.id}}" name="id" [(ngModel)]="site.id" #id>
<div class="form-group mb-20" [ngClass]="{'has-error':name.errors && (name.dirty || name.touched || siteForm.submitted)}">
<label class="control-label mb-10">Site Name</label>
<input type="text" class="form-control default-rounded" name="name" required [(ngModel)]="site.name" #name>
<small [hidden]="name.valid || (name.pristine && !siteForm.submitted)" class="text-danger">
Name is require.
</small>
</div>
<div class="form-group mb-20" [ngClass]="{'has-error':maximumCapacity.errors && (maximumCapacity.dirty || maximumCapacity.touched || siteForm.submitted)}">
<label class="control-label mb-10">Maximum Capacity</label>
<input type="text" class="form-control default-rounded" name="maximumCapacity" required [(ngModel)]="site.maximumCapacity" #maximumCapacity pattern="[0-9]+">
<small [hidden]="maximumCapacity.valid || (maximumCapacity.pristine && !siteForm.submitted)" class="text-danger">
Maximum capacity is require (enter only digits)
</small>
</div>
<div class="form-group mb-20">
<label class="control-label mb-10">Site Type</label>
<select class="form-control" name="type" [(ngModel)]="site.type" #type>
<option>Comercial</option>
<option>Residential</option>
<option>Industrial</option>
<option>Etc</option>
</select>
</div>
<div class="form-group mb-20" [ngClass]="{'has-error':contactNumber.errors && (contactNumber.dirty || contactNumber.touched || siteForm.submitted)}">
<label class="control-label mb-10">Site Contact Number</label>
<input type="text" class="form-control default-rounded" name="contactNumber" required [(ngModel)]="site.contactNumber" #contactNumber>
<small [hidden]="contactNumber.valid || (contactNumber.pristine && !siteForm.submitted)" class="text-danger">
Site contact number is require
</small>
</div>
</div>
<div [hidden]="firstTab">
<div class="form-group mb-20">
<label class="control-label">Address</label>
<div class="flex">
<div class="w-79 mr-10 mt-5">
<input type="text" class="form-control default-rounded" name="location" required places-auto-complete (place_changed)="placeChanged($event)" [types]="['geocode']">
</div>
<div class="mt-5">
<button type="button" class="btn btn-primary black-background white-text pull-right" (click)="chnageMap()">Lookup</button>
</div>
</div>
</div>
<div class="form-group mb-20">
<ng2-map zoom="{{zoom}}" center="{{site.latitude}}, {{site.longitude}}">
<marker *ngFor="let pos of positions" [position]="pos" [icon]="markerImage"></marker>
<drawing-manager [drawingMode]="'marker'" [drawingControl]="true" [drawingControlOptions]="{ position: 2, drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle'] }" [circleOptions]="{ fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, editable: true, zIndex: 1 }"></drawing-manager>
</ng2-map>
</div>
</div>
<button type="submit" class="btn btn-primary black-background white-text pull-right">Save</button>
If I set value false of "secondTab" then I got below error
ORIGINAL EXCEPTION: self._NgModel_202_5.context is not a function
If I use ngFor instead of [hidden] then it works fine but I didn't get value on form submit if I am on second tab.
If I used formBuilder then for form then also it will works fine.
So I may be issue with ngModel
What is the point of using here?
#location="ngModel"
you normally use #variable to have a reference on the html element in this case.
Try changing the code to this:
<div [hidden]="secondTab">
<input type="hidden" class="form-control" value="{{site.location}}" name="location" [(ngModel)]="site.location" #location>
</div>
As a recommendation I wouldn´t use the hidden property but *ngIf="secondTab"
I have a strange issue with a radio input not populating the model of an angular form.
All fields populate the model except for the radio input...
The radio input is given at the beginning of the form below. I use ng-inspector and I can see that signupForm.member.role does not get populated when I click one of the radio values.
Can someone please help?
<form name="formCtrl" ng-submit="signup(formCtrl)" class="col-xs-12" novalidate role="form">
<h4>{{'SIGNUP_FORM_ROLE_PREFIX' | translate}}</h4>
<div class="btn-group Choix col-xs-12 text-center" data-toggle="buttons" ng-class="getCssClasses(formCtrl, formCtrl.signupRole)">
<label class="btn StateButton col-xs-6">
<img class="img-responsive" src="assets/media/img/parents.svg" />
<input type="radio" name="signupRole" ng-model="signupForm.member.role" value="ROLE_BASIC_PARENTS" ng-required="true" />
<span class="help-block">{{'DOMAIN_ENUM_' + 'ROLE_BASIC_PARENTS' | translate}}</span>
</label>
<label class="btn StateButton col-xs-6">
<img class="img-responsive" src="assets/media/img/professionel.svg" />
<input type="radio" name="signupRole" ng-model="signupForm.member.role" value="ROLE_BASIC_CHILDCARE_WORKER" ng-required="true" />
<span class="help-block">{{'DOMAIN_ENUM_' + 'ROLE_BASIC_CHILDCARE_WORKER' | translate}}</span>
</label>
<div ng-messages="formCtrl.signupRole.$error" ng-if="formCtrl.$submitted">
<div ng-message="required" class="control-label">{{'SIGNUP_FORM_ROLE_REQUIRED'| translate}}</div>
</div>
</div>
<hr>
<div class="form-group" ng-class="getCssClasses(formCtrl, formCtrl.firstName)">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon icon-Prenom" aria-hidden="true"></span>
</span>
<input type="text" name="firstName" ng-minlength="2" placeholder="{{'SIGNUP_FORM_FIRST_NAME' | translate}}" ng-model="signupForm.member.firstName" ng-required="true" class="form-control" />
<span ng-if="isSuccessFeedback(formCtrl, formCtrl.firstName)" class="form-control-feedback" aria-hidden="true"><span class="glyphicon icon-Valid" aria-hidden="true"></span></span>
<span ng-if="isErrorFeedback(formCtrl, formCtrl.firstName)" class="form-control-feedback" aria-hidden="true"><span class="glyphicon icon-Erreur" aria-hidden="true"></span></span>
</div>
<div ng-messages="formCtrl.firstName.$error" ng-if="formCtrl.$submitted">
<div ng-message="required" class="control-label">{{'SIGNUP_FORM_FIRST_NAME_REQUIRED' | translate}}</div>
<div ng-message="minlength" class="control-label">{{'SIGNUP_FORM_FIRST_NAME_REQUIRED' | translate }}</div>
</div>
</div>
</form>
Here is a working plunker: http://plnkr.co/edit/lsaevbL0mBRku7zcrGDJ
One can notice that the radio is not taken into account when the form is submitted even if one of the radios is selected...
Simply use value instead of ng-value. Please see this working demo: http://plnkr.co/edit/2EB4NvTO1StN50NIXOyn?p=preview.
You should not use ng-value, which is looking for $scope.ROLE_BASIC_PARENTS.
Check AngularJS.org, the example there use:
<input type="radio" ng-model="color.name" ng-value="specialValue">
And in the controller:
$scope.specialValue = {
"id": "12345",
"value": "green"
};
I have the following form :
UPDATE
<script type="text/ng-template" id="form-profile.html">
<form id="f1" name="form">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name" ng-class="submitted ? 'ng-dirty' : ' ' " required autofocus>
<span style="color:red" ng-show="form.name.$dirty || form.name.$invalid">Name is required</span>
</div>
<div class="form-group">
<label for="name">E-mail</label>
<input type="text" class="form-control" name="email" ng-model="formData.email" ng-class="submitted ? 'ng-dirty' : ' '" required autofocus>
<span style="color:red" ng-show="f1.email.$dirty && f1.email.$invalid">
<span ng-show="f1.email.$error.required">Email is required.</span>
</span>
</div>
<div class="form-group">
<label for="Cellphone">Mobil nr.</label>
<input type="text" class="form-control" name="Cellphone" ng-model="formData.Cellphone" ng-class="submitted ? 'ng-dirty' : ' '" required autofocus>
<span style="color:red" ng-show="f1.Cellphone.$dirty && f1.Cellphone.$invalid">
<span ng-show="f1.Cellphone.$error.required">Cellphone is required.</span>
</span>
</div>
<div class="form-group">
<label for="address">Adresse</label>
<input type="text" class="form-control" name="address" ng-model="formData.address">
</div>
<div class="form-group col col-33 col-offset-67">
<a ui-sref="front.form.organisation" class="button icon-right ion-chevron-right button-energized .col-offset-50">
Next
</a>
</div>
</form>
</script>
When I press next I want the form to disable the next button and show me the errors.
I have tried with name so far and I did not get the errors.
Thank you
Please see demo below
ng-show="f1.name.$dirty <-- f1 that's form name not id
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<form name="f1">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name" required autofocus>
<span style="color:red" ng-show="f1.name.$dirty && f1.name.$invalid">Name is required</span>
</div>
</form>
</div>