It seems that none of the functions in this JSFiddle are being called -
http://jsfiddle.net/2x4yt0vb/11/
There are functions for validation and a clear function. None of the validations are working. For example if -20 or aaa is entered in the form "Invalid entry" and other error messages should be displayed. When the Clear button is clicked none of the functionality within the clear() function is firing. Why aren't these functions working in JSFiddle?
Here is the HTML:
<html ng-app="myApp">
<div ng-controller="formulaCtrlr" >
<form name="vm.formContainer.form" autocomplete="off">
<div class="form-group" ng-class="{'has-error': vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$invalid}">
<label for="FatA" class="col-sm-2 control-label">Fat A</label>
<input name="FatA" type="text" class="form-control col-sm-10 input-sm" ng-required="true" ng-model-options="{updateOn: 'blur'}" ui-validate="{numberCheck: 'vm.numberCheck($value)', fatRangeCheck: 'vm.fatRangeCheck($value)'}" ng-model="vm.formulaInput.Fats[0]" /><span>%</span>
<span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$invalid">Invalid entry.</span>
<span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.numberCheck">{{vm.errorMessages.numberCheck}}</span>
<span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.fatRangeCheck">{{vm.errorMessages.fatRangeCheck}}</span>
</div>
<div class="form-group" ng-class="{'has-error': vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$invalid}">
<label for="FatB" class="col-sm-2 control-label">Fat B</label>
<input name="FatB" type="text" class="form-control col-sm-10 input-sm" ng-required="true" ng-model-options="{updateOn: 'blur'}" ui-validate="{numberCheck: 'vm.numberCheck($value)', fatRangeCheck: 'vm.fatRangeCheck($value)'}" ng-model="vm.formulaInput.Fats[1]" /><span>%</span>
<span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$invalid">Invalid entry.</span>
<span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.numberCheck">{{vm.errorMessages.numberCheck}}</span>
<span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.fatRangeCheck">{{vm.errorMessages.fatRangeCheck}}</span>
</div>
<div class="col-sm-offset-2">
<input type="reset" value="Clear" class="btn btn-default" ng-click="vm.clear()" ng-disabled="vm.formContainer.form.$pristine" />
</div>
</form>
<div>formula input: {{vm.formulaInput}}</div>
</div>
</html>
Here is the JS/Angular:
angular.module('myApp', [])
.controller("formulaCtrlr", ['$scope', function ($scope) {
var vm = this;
vm.formContainer = {
form: {}
}
vm.formulaInput = {};
vm.formulaInput.Fats = [];
vm.clear = function () {
vm.formulaInput = {};
vm.formulaInput.Fats = [];
vm.formContainer.form.$setPristine();
}
vm.errorMessages = {
numberCheck: 'Value must be a number.',
fatRangeCheck: 'Number must be between 0 and 100.'
}
vm.numberCheck = function (value) {
var result = !(isNaN(parseFloat(value)));
return result;
//return !(isNaN(parseFloat(value)));
}
vm.fatRangeCheck = function (value) {
var result = (value && value > 0.0 && value < 100.0);
return result;
//return (value && value > 0.0 && value < 100.0);
}
}]);
Related
I am new to angularjs. I have created simple login page. The code is working fine, but my validation and credentials have some problem. I found some clues in few sites, but those answers din't provide the proper information for my solution. The error that I am facing is in the validation. When I enter the invalid mailid and password it should pop-up error message . But I could not achieve it.
HTML :
`<form ng-submit="loginform()" class="ng-scope ng-pristine ng-valid center" name="logform"><br/><br>`
<div class="form-group col-md-4">
<label form="emailinput"><b>Email</b></label>
<input type="email" class="form-control" name="uname" id="emailinput" placeholder="you#example.com" ng-model="username" ng-pattern="emailFormat">
<span ng-show="logform.uname.$dirty.username && loginform.uname.$invalid"></span>
<span style="color: Red" ng-show="logform.uname.$valid">* Email is required</span>
<span style="color: Red" ng-show="logform.uname.$error.username">* Invalid ID </span>
</div>
<div class="form-group col-md-4">
<label form="pwdinput"><b>Password</b></label>
<input type="password" class="form-control" name="pwd" id="pwdinput" placeholder="*******" ng-model="password">
<span style="color: red" ng-show="logform.pwd.$dirty && loginform.pwd.$invalid"></span>
<span ng-show="logform.pwd.$error.$valid">* Password is required</span>
<span ng-show="logform.pwd.$error.pwd">* Invalid Password</span>
</div>
<div class="col-md-4">
<button type="cancel" class="btn" ng-click="toggle_cancel()">Cancel</button>
<button class="btn btn-primary" ng-click="submit()" ng-Disabled="logform.username.$dirty && loginform.username.$invalid || logform.pwd.$dirty && loginform.pwd.$invalid">Login</button>
</div>
AngularJs :
`var app = angular.module('logapp',['toastr']);`
app.factory('authentication', function() {
return {
isAuthenticated: false,
user: null
}
});
app.controller('credientials', function($scope,toastr,authentication) {
$scope.loginform = function (username, password) {
if ($scope.username === 'admin#evol.com' && $scope.password === '123') {
authentication.isAuthenticated = true;
$location.path("/home");
} else {
toastr.error('Invalid username and password');
}
};
});
Kindly read the snippet below and alter your code to setValidity() based on condition.
var app = angular.module('logapp', []);
app.factory('authentication', function() {
return {
isAuthenticated: false,
user: null
}
});
app.controller('credientials', function($scope, authentication) {
$scope.loginform = function(isValid) {
$scope.logform.uname.$setValidity("username", true);
$scope.logform.pwd.$setValidity("pwd", true);
if (isValid) {
if ($scope.username == 'admin#evol.com' && $scope.password == '123') {
alert("success");
authentication.isAuthenticated = true;
} else {
$scope.logform.uname.$setValidity("username", false);
$scope.logform.pwd.$setValidity("pwd", false);
}
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="logapp" ng-controller="credientials">
<form ng-submit="loginform(logform.$valid)" class="ng-scope ng-pristine ng-valid center" name="logform" novalidate role="form">
<div class="form-group col-md-4">
<label form="emailinput"><b>Email</b></label>
<input type="email" class="form-control" name="uname" id="emailinput" placeholder="you#example.com" ng-model="username" ng-pattern="emailFormat" required>
<span style="color: Red" ng-show="logform.$submitted && logform.uname.$error.required">* Email is required</span>
<span style="color: Red" ng-show="logform.$submitted && logform.uname.$error.username">* Invalid ID </span>
</div>
<div class="form-group col-md-4">
<label form="pwdinput"><b>Password</b></label>
<input type="password" class="form-control" name="pwd" id="pwdinput" placeholder="*******" ng-model="password" required>
<span ng-show="logform.$submitted && logform.pwd.$error.required">* Password is required</span>
<span ng-show="logform.$submitted && logform.pwd.$error.pwd">* Invalid Password</span>
</div>
<div class="col-md-4">
<button type="cancel" class="btn" ng-click="toggle_cancel()">Cancel</button>
<button class="btn btn-primary" type="submit">Login</button>
</div>
</form>
</body>
It is such that I must have been an error if you just have empty content in input the boxes. It must first tell it when you click on my button.
when the specific error should I add an error class as boostrap has when an error occurs. How would I do this?
var app = angular.module('UserValue', [])
app.controller('UserFirstValue', function ($scope) {
var mail = $scope.emai;
var password = $scope.password;
var firstname = $scope.Firstname;
var lastname = $scope.Lastname;
var age = $scope.age;
$scope.CheckUserValue = function () {
if (mail == null && password == null && firstname == null && lastname == null && age == null) {
//show error her
return "Remember to throw content in!"
}
return null;
}
});
create.cshtml:
<div class="col-lg-6" ng-app="UserValue" ng-controller="UserFirstValue">
//Show error her
<div class="OutError" ng-show="CheckUserValue()" style="margin-bottom:10px;">
<button type="submit" class="btn btn-success" ng-click="CheckUserValue()" id="clickUserCreate"><i class="fa fa-plus"></i></button>
</div>
</div>
Error are:
It shows no means subtitled forward.
OK - so you had multiple issues here... Im just going to leave a JS bin here for you to look over and it should totally resolve the issues you were having previously trying to set up your validation.
https://jsbin.com/nanizafizi/1/edit?html,js,console,output
HTML:
<div class="col-lg-6" ng-app="UserValue" ng-controller="UserFirstValue" ng-hide="hideForm">
{{errorMessage}}
<form ng-submit="submitForm()" role="form">
<div class="form-group">
<label>First Name:</label>
<input type="text" ng-model="user.first" class="form-control">
</div>
<div class="form-group">
<label>Last Name:</label>
<input type="text" ng-model="user.last" class="form-control">
</div>
<div class="form-group">
<label>Email address:</label>
<input type="email" ng-model="user.email" class="form-control">
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" ng-model="user.password" class="form-control">
</div>
<div class="form-group">
<label>Age:</label>
<input type="number" class="form-control" ng-model="user.age">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
JS:
var app = angular.module('UserValue', [])
app.controller('UserFirstValue', function ($scope) {
$scope.errorMessage = "";
$scope.hideForm = false;
$scope.submitForm = function() {
if ($scope.user === undefined ||
$scope.user.first === undefined ||
$scope.user.last === undefined ||
$scope.user.email === undefined ||
$scope.user.password === undefined ||
$scope.user.age === undefined) {
$scope.errorMessage = "Oops it looks like you missed a field!";
}
else {
$scope.user = {};
$scope.hideForm = true;
}
}
});
I have a couple of fields that I would like to replicate dynamically. I'm using ng-reapt which is doing the job. However, the validation messages are not working. Here's what I've got:
<html ng-app="app">
<head>
<title>teste</title>
</head>
<body ng-controller='testController'>
<label>Number of Workers</label>
<select ng-model="quantity" ng-change="changed()">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<form name='frm' action='/workers/add' method='POST'>
<div ng-repeat="i in numberOfWorkers track by $index">{{$index + 1}}
<div>
<label>First Name</label>
<input class="fullSize" letters-only placeholder="Please enter your name" type="text" name="firstName" ng-model="workers[$index].firstName" ng-minlength="3" ng-maxlength="50" ng-required="true" maxlength="50">
<span ng-cloak class="error-container" ng-show="submitted || showErrors(frm.firstName)">
<small class="error" ng-show="frm.firstName[{{$index}}].$error.required">* Please enter your name.</small>
<small class="error" ng-show="frm.firstName[{{$index}}].$error.minlength">* At least 3 chars.</small>
<small class="error" ng-show="frm.firstName[{{$index}}].$error.maxlength">* No more than 50 chars.</small>
</span>
</div>
<div>
<label>Surname</label>
<input class="fullSize" letters-only placeholder="Please enter your surname" type="text" name="surName" ng-model="workers[$index].surName" ng-minlength="3" ng-maxlength="50" ng-required="true" maxlength="50">
<span ng-cloak class="error-container" ng-show="submitted || showErrors(frm.surName)">
<small class="error" ng-show="frm.surName[$index].$error.required">* Please enter your name.</small>
<small class="error" ng-show="frm.surName[$index].$error.minlength">* At least 3 chars.</small>
<small class="error" ng-show="frm.surName[$index].$error.maxlength">* No more than 50 chars.</small>
</span>
</div>
<div>
<label>Email</label>
<input class="grid-full" placeholder="Please enter your e-mail" type="email" name="email" ng-model="workers[$index].email" ng-minlength="3" ng-maxlength="50" required maxlength="50">
<span class="error-container" ng-show="submitted || showErrors(frm.email)">
<small class="error" ng-show="frm.email[$index].$error.required">* Please enter your E-mail.</small>
<small class="error" ng-show="frm.email[$index].$error.email">* Invalid email.</small>
</span>
</div>
</div>
</form>
<button ng-click="test()">test</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller('testController',['$scope', function($scope){
$scope.quantity = 1;
$scope.submitted = false;
$scope.numberOfWorkers = [1];
$scope.workers = [];
$scope.getNumber = function (num) {
return new Array(num);
};
$scope.test = function(){
console.log($scope.workers);
};
$scope.changed = function() {
$scope.workers = [];
$scope.numberOfWorkers = new Array(parseInt($scope.quantity));
}
$scope.isUndefined = function (thing) {
var thingIsUndefined = (typeof thing === "undefined");
return thingIsUndefined;
};
$scope.showErrors = function (field) {
var fieldIsUndefined = $scope.isUndefined(field);
if (fieldIsUndefined == false)
{
var stateInvalidIsUndefined = $scope.isUndefined(field.$invalid);
var stateDirtyIsUndefined = $scope.isUndefined(field.$dirty);
return (fieldIsUndefined == false && stateInvalidIsUndefined == false && stateDirtyIsUndefined == false &&
(field.$invalid && field.$dirty));
}
return false;
};
}]);
</script>
</body>
</html>
Is there a way to display and validate fields using the index position?
frm.firstName.$error.minlength
The code above works for the first block, but it display the message to all copies.
I think this along the lines of what you're trying to achieve:
http://plnkr.co/edit/HVwnRfvt30WrsteY6DvW
We need to assign a dynamic name to each input field, by way of using the $index of the ngRepeat:
<form name="form">
<div ng-repeat="entry in array track by $index">
<input type="text" name="someField{{$index}}">
<div>
</form>
And based on the number of entries in array, we can access in a loop each dynamically created someField using the syntax below:
form['someField' + $index]
In your case, let's say we have three workers, and the second worker's firstName is invalid -- in an ngRepeat, it would look like this:
<div ng-repeat="i in numberOfWorkers track by $index">
isValid? --> form.firstName{{$index}}.$valid = {{form['firstName' + $index].$valid}}
</div>
Output:
isValid? --> form.firstName0.$valid = true
isValid? --> form.firstName1.$valid = false
isValid? --> form.firstName2.$valid = true
With Angular I use specific directive for validate single input field. (i.e. email, username etc.)
In this project I have this scenario:
I need to set an Advance Payment field, this Advance must be between min/max value.
To set the Advance I have three input text:
Cash
Old Car Value
Financed Advance
the sum of those three input is my Advance value.
So I need to validate Advance but I have no a single input with ng-model setted on.
What is the best way to check and validate the Advance Payment value?
I need to add a directive to all those three input fields? or is better a directive for the form?
Any suggestion will be appreciated.
jsfiddle example
(function () {
var app = angular.module("myApp", ['ngMessages']);
app.controller('myFormCtrl', function($scope) {
$scope.plan = {};
$scope.plan.advance = 0;
$scope.plan.min_advance = 3000;
$scope.plan.max_advance = 6000;
$scope.updateAdvance = function(){
var advance = 0;
if ($scope.quotationAdvanceType && !isNaN($scope.plan.quotation))
advance += $scope.plan.quotation;
if ($scope.cashAdvanceType && !isNaN($scope.plan.cash))
advance += $scope.plan.cash;
if ($scope.financedAdvanceType && !isNaN($scope.plan.financed))
advance += $scope.plan.financed;
$scope.plan.advance = advance;
}
});
})();
Just to give you (and perhaps others) another option.
To simplify, you can use a number input with its ng-model set to plan.advance. This will allow you to use the min/max attributes. You can set the input to hidden if you prefer not to display it.
<input type="number" name="advance" ng-model="plan.advance" min="{{plan.min_advance}}" max="{{plan.max_advance}}" hidden />
Then you can use the built in validation for min and max such as:
<span ng-messages="myForm.advance.$error" role="alert">
<span ng-message="min">Minimum not reached.</span>
<span ng-message="max">Maximum exceeded.</span>
</span>
Run the code snippet below to see it in action:
(function () {
var app = angular.module("myApp", ['ngMessages']);
app.controller('myFormCtrl', function ($scope) {
var advance = [];
$scope.plan = {};
$scope.plan.advance = 0;
$scope.plan.min_advance = 3000;
$scope.plan.max_advance = 6000;
$scope.reset = function(val) {
$scope.plan[val] = undefined;
$scope.updateAdvance();
};
$scope.updateAdvance = function () {
advance = [$scope.plan.quotation, $scope.plan.cash, $scope.plan.financed];
$scope.plan.advance = advance.reduce(function (a, b) {
a = a ? a : 0;
b = b ? b : 0;
return a + b;
}, 0);
}
});
})();
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-messages.min.js"></script>
<div ng-app="myApp" class="container">
<form name="myForm" ng-controller="myFormCtrl" class="form-horizontal">
<div class="form-group" ng-class="{ 'has-error' : myForm.plan.min_advance.$invalid && myForm.plan.min_advance.$touched}">
<label for="plan.min_advance" class="control-label col-xs-4 col-sm-2">Min Advance</label>
<div class="col-xs-8 col-sm-10">
<input type="number" ng-model="plan.min_advance" class="form-control" />
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : myForm.plan.max_advance.$invalid && myForm.plan.max_advance.$touched}">
<label for="plan.max_advance" class="control-label col-xs-4 col-sm-2">Min Advance</label>
<div class="col-xs-8 col-sm-10">
<input type="number" ng-model="plan.max_advance" class="form-control" />
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : myForm.surname.$invalid && myForm.surname.$touched}">
<div class="col-xs-12">
<label for="surname" class="control-label">Surname</label>
<input type="text" value="" name="surname" id="surname" ng-model="surname" ng-minlength="3" ng-mAXlength="20" required="required" class="form-control" />
<span ng-messages="myForm.surname.$error" class="help-block" role="alert" ng-show="myForm.surname.$touched">
<span ng-message="required">You forgot to enter your surname</span>
<span ng-message="minlength">Surname is too short</span>
<span ng-message="maxlength">Surname is too long</span>
</span>
</div>
</div>
<p>Set the Advance between minimun <strong>{{plan.min_advance | currency}}</strong> and maximum <strong>{{plan.max_advance | currency}}</strong>
</p>
<div class="form-group">
<label for="quotation" class="col-xs-4 col-sm-2 control-label">
<input type="checkbox" name="quotationAdvanceType" ng-model="quotationAdvanceType" ng-change="reset('quotation')"/> Quotation:
</label>
<div class="col-xs-8 col-sm-10">
<input type="number" name="quotation" ng-value="plan.quotation" ng-model="plan.quotation" ng-change="updateAdvance()" class="form-control" ng-disabled="!quotationAdvanceType" placeholder="{{'max '+ (plan.max_advance-plan.advance)}}" />
</div>
</div>
<div class="form-group">
<label for="cash" class="col-xs-4 col-sm-2 control-label">
<input type="checkbox" name="cashAdvanceType" ng-model="cashAdvanceType" ng-change="reset('cash')" /> Cash:
</label>
<div class="col-xs-8 col-sm-10">
<input type="number" name="cash" ng-value="plan.cash" ng-model="plan.cash" ng-change="updateAdvance()" class="form-control" ng-disabled="!cashAdvanceType" placeholder="{{'max '+ (plan.max_advance-plan.advance)}}" />
</div>
</div>
<div class="form-group">
<label for="financed" class="col-xs-4 col-sm-2 control-label">
<input type="checkbox" name="financedAdvanceType" ng-model="financedAdvanceType" ng-change="reset('financed')" /> Financed:
</label>
<div class="col-xs-8 col-sm-10">
<input type="number" name="financed" ng-value="0" ng-model="plan.financed" ng-change="updateAdvance()" class="form-control" ng-disabled="!financedAdvanceType" placeholder="{{'max '+ (plan.max_advance-plan.advance)}}" />
</div>
</div>
<div ng-class="{'has-error' : myForm.advance.$invalid && (quotationAdvanceType || cashAdvanceType || financedAdvanceType) && (myForm.quotation.$dirty || myForm.cash.$dirty || myForm.financed.$dirty)}">
<input type="number" name="advance" ng-model="plan.advance" min="{{plan.min_advance}}" max="{{plan.max_advance}}" hidden />
<p class="help-block">Total Advance: <strong>{{plan.advance ? (plan.advance | currency) : 'none'}}</strong>
<span ng-messages="myForm.advance.$error" role="alert" ng-show="myForm.quotation.$dirty || myForm.cash.$dirty || myForm.financed.$dirty">
<span ng-message="min">Minimum not reached.</span>
<span ng-message="max">Maximum exceeded.</span>
</span>
</p>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid">Send</button>
</form>
</div>
Is there an advantage over your custom directive approach? I would say yes and here's why:
Your directive is tightly coupled to your controller scope, so you can't reuse it elsewhere in your application and it will require you to separately update it if you change one of your scope variables in the future.
You are essentially duplicating code for functionality that already exists in the framework. That results in more upfront cost of development and maintenance effort down the line.
I solve my question with a brand new directive.
I don't know if this is the right way to do that, but it works fine and the behaviour is correct.
app.directive('totalAdvance', function() {
return {
restrict: 'E',
require: '^form',
link: function(scope, element, attrs, formCtrl) {
var advanceValue = 0;
var advanceValidator = function() {
if (advanceValue >= attrs.min && advanceValue <= attrs.max){
formCtrl.$setValidity('minAdvance', true);
formCtrl.$setValidity('maxAdvance', true);
return advanceValue;
}else if (advanceValue < attrs.min) {
formCtrl.$setValidity('minAdvance', false);
formCtrl.$setValidity('maxAdvance', true);
return null;
}else if (advanceValue > attrs.max){
formCtrl.$setValidity('minAdvance', true);
formCtrl.$setValidity('maxAdvance', false);
return null;
}
};
scope.$watch('plan.advance', function(value) {
advanceValue = value;
return advanceValidator();
});
scope.$watch('plan.min_advance', function() {
return advanceValidator();
});
scope.$watch('plan.max_advance', function() {
return advanceValidator();
});
}
};
});
jsfiddle example
I've a form below
<form class="form-horizontal" role="form" name="req_appmt" id="req_appmt" novalidate ng-submit="SendAppointmentRequest()">
<div class="form-group" ng-class="(req_appmt.form_comments.$error.required) ? 'has-error' : '' ">
<label for="form_comments" class="col-lg-2 control-label">Reason for Appointment* :</label>
<div class="col-lg-10"><textarea id="form_comments" name="form_comments" ng-model="formdata.form_comments" class="form-control" rows="3" required></textarea></div>
</div>
<div class="form-group" ng-class="(req_appmt.physician_id.$error.required) ? 'has-error' : '' ">
<label for="physician_id" class="col-lg-2 control-label">To* :</label>
<div class="col-lg-10">
<select name="physician_id" ng-model="formdata.physician_id" id="physician_id" class="form-control" required>
<option value="">--Select--</option>
<option ng-repeat="physician in physicians" value="{{physician.id}}">{{physician.fullname}}</option>
</select>
</div>
</div>
<div class="form-group" ng-class="(req_appmt.date.$error.required) ? 'has-error' : '' ">
<label for="inputEmail1" class="col-lg-2 control-label">Date :</label>
<div class="col-lg-10">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="dd-MM-yyyy" ng-model="formdata.date" name="date" is-open="opened" min-date="minDate" close-text="Close" required="required" ng-click="open($event)">
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="form-group" ng-class="(req_appmt.time.$error.required) ? 'has-error' : '' ">
<label for="inputEmail1" class="col-lg-2 control-label">Free Slot :</label>
<div class="col-lg-10">
<select name="time" ng-model="formdata.time" id="time" class="form-control" required>
<option value="">--Select--</option>
<!-- <option ng-repeat="key,value in slots" value="{{value}}">{{value}}</option> -->
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10"><p>
<button type="submit" class="btn btn-primary btn-lg btn-success">Request Appointment</button>
Cancel
</p> </div> </div>
</form>
This is my controller :
ModuleEvents.controller('ctrlRequestAppointment', function ($location,$scope,$http,$rootScope,$cookies,ServiceCheckAuth,ServiceEvents){
/*First check patient is logged in*/
if( !ServiceCheckAuth.isPatientLoggedIn() ){
$location.url('/login');
return;
}
/*Set rootScope values*/
$rootScope.root = {
html_title:HTML_TITLE_PATIENT_APPOINTMENT_REQUEST,
loggedin:true,
activeNxtstp:'active',
customclass:'content_inner_im w-100-mob'
};
var json_physicians = localStorage.getItem('physicians');
$scope.minDate = $scope.minDate ? null : new Date();
$scope.date = new Date();
$scope.physicians = JSON.parse(json_physicians);
$scope.formdata = {};
$scope.opened = false;
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.$watch(req_appmt.date.$valid, function() {
if( req_appmt.date.$valid && req_appmt.physician_id.$valid ){
console.log($scope.formdata);
}
});
$scope.SendAppointmentRequest = function(){
if( $scope.req_appmt.$valid ){
console.log($scope.formdata);
}
}
});
What I'm trying :
1) User selects To field in the form
2) then user selects date field in the form
3) then I want to check in controller both are filled and validated
4) then I want to fire a ajax request that will populate the Free Slot field of he form
Problem :
I can not check whether the fields are valid
Any help is greatly appreciated
Thanks
can you use an function() which can validate all fields of formdata like
$scope.function_name=function()
{
var validatefalg=true;
if($scope.formdata.physician_id!='')
{
validatefalg=false;
return validatefalg;
}
else
{
return validatefalg;
}
}
I solve my problem with the help of #jyotsna :
if( $scope.req_appmt.physician_id.$valid && $scope.req_appmt.date.$valid ){}