d.setclass is not a function in ngMessages module - angularjs

In one of my angularjs pages, I am using ngMessages module for form validation. While loading that page I am getting folowing error in console.
"angular.js:9400TypeError: d.setClass is not a function
at render (angular-messages.js:413)"
No idea why. Any help would be appreciated.
here is the HTML
<div class="extranet-content">
<div class="container-list">
<form name="personalForm" ng-submit="personalForm.$valid && saveUsers()" novalidate>
<div class="list-header" ng-show="all_users.length > 0">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-1">
<h3>
Id
</h3>
</div>
<div class="col-xs-3">
<h3>
Name
</h3>
</div>
<div class="col-xs-3">
Login
</div>
<div class="col-xs-2">
Sign
</div>
<div class="col-xs-2">
password
</div>
<div class="col-xs-12">
<div class="border"></div>
</div>
</div>
</div>
<div class="list-content" ng-class="{ 'noHeader' : !all_users.length }">
<div class="row" ng-show="saveErrors.length > 0" ng-repeat="error in saveErrors track by $index">
<div class="col-xs-12">
</div>
<div class="col-xs-12"></div>
</div>
<div class="row clearfix"
ng-repeat-start="user in all_users = (users | filter: searchUser) | orderBy : predicate:reverse track by $index"
ng-class="{ 'marginTop' : $first}">
<div class="col-xs-1">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-3">
</div>
<div class="col-xs-3">
<input type="text" name="txtLogin" id="txtLogin_{{$index}}" ng-model="user.Login">
</div>
<div class="col-xs-2">
<ng-form name="signForm">
<input maxlength="7" type="text" name="txtSign" id="txtSign_{{$index}}" ng-model="user.Sign"
required>
<span ng-messages="listFormSubmitted && signForm.txtSign.$error" role="alert" class="error">
<span ng-message="required">required</span>
</span>
</ng-form>
</div>
<div class="col-xs-2"></div>
</div>
<div class="row group" ng-repeat-end>
<div class="col-xs-12" ng-if="!$last">
<div class="borderBottom"></div>
</div>
</div>
</div>
</form>
</div>
</div>

Related

Twig loop bootstrap

How can I make twig loop, that goes like this? Tried batch and loop.index, but just couldn't make it work as expected.
<div class="col-lg-6">
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
</div>
<div class="col-lg-6">
</div>

Angularjs upload image

I'm trying to create an upload function using angularjs. I have watch and read few tutorials in the internet. Unfortunately all the tutorials are too complicated for me because I'm still new in this field.
<form ng-submit="upload(currentUser())">
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Car</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Perodua Myvi" class="form-control" ng-model="newCar" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Price(RM) per day</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="80" class="form-control" ng-model="newPrice" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Business Area</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Universiti Malaysia Sabah" class="form-control" ng-model="businessArea" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Insert Car Image</label>
<br>
</div>
<div class="col-xs-5">
<!--<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Image
</button>-->
<input type="file"/>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-5">
<button type="submit" class="btn btn-primary btn-sm pull-right">
<span class="glyphicon glyphicon-globe"></span> Publish
</button>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<br>
<br>
</form>
app.controller('postadCtrl', [
'$scope',
'auth',
function($scope, auth) {
$scope.currentUser = auth.currentUser;
$scope.posts = [];
$scope.upload = function(user) {
$scope.posts.push({
company_name: user,
car_type: $scope.newCar,
seaters: 5,
price: $scope.newPrice,
contact: 038880000,
location: $scope.businessArea
});
};
}
]);
So how do I do this in the simplest form and explanation? And how does my router and module will look like?
The output should look like this.

how to validate two select boxes in angular js

this is my html form that have to use to get the details but when i use the required attribute in the select tag, only the first one is validated and not the second one or an other field after the select tag, for eg if i select option in the first select and click post project then there is no error about the validation, and if i dont select the data from the first select tag there is validation error popup saying that the field is required,
<form name="myForm" role="form" action="#">
<div class="well" style="margin-left:20px; margin-right:20px">
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-lg-12">
<h4 style="color:darkblue">What type of project do you require?</h4>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-6 col-lg-6">
<select name="drop1" class="form-control" ng-model="project.match1">
<option value="">-- Select Category --</option>
<option ng-repeat="items in serviceCategory" value="{{items.ServiceCategoryId}}">{{items.ServiceCategoryName}}</option>
</select>
</div>
<div class="col-md-6 col-lg-6">
<select class="form-control" ng-model="project.match2" name="drop2">
<option value="">-- Select Sub Category --</option>
<option ng-repeat="a in service" ng-if="a.ServiceCategoryId==project.match1">
{{a.ServiceName}}
</option>
</select>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<textarea ng-model="project.ServiceCategories" placeholder="Add Service Categories here" rows="3" style="resize:none; width:100%"></textarea>
</div>
</div>
</div>
<div class="well" style="margin-left:20px; margin-right:20px">
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12 text-left">
<h4 style="color:darkblue">What is your Project about</h4>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12 text-left">
Describe your Project<br>
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<input type="text" ng-model="project.DescribeProject" style="width:100%">
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-6 col-lg-6">
What is your Project about?
</div>
<div class="col-md-6 col-lg-6">
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<textarea ng-model="project.AboutProject" ng-trim="false" rows="3" cols="70" ng-maxlength="5000" style="resize:none; width:100%;"></textarea>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
Attach files
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<!--attach file code-->
<div style="height:30px; width:100%;">
</div>
</div>
</div>
<div class="row" style="margin-bottom:15px; margin-left:5px; margin-right:5px">
<div class="col-md-1 col-lg-1"></div>
<div class="col-md-10 col-lg-10">
<div class="text-right">
<button class="btn btn-default btn-primary" type="submit" ng-click="showData(project)">Post Project</button>
<button class="btn btn-default" data-dismiss="modal" aria-label="Close" style="color:black; border-color: #2e6da4">Close</button>
</div>
</div>
<div class="col-md-1 col-lg-1"></div>
</div>
</div>
</form>
The Script is
var app = angular.module("MyApp", []);
app.controller('MainCtrl', function ($scope, $http) {
$http.get('/JsonData/ServiceCategory.json').success(function (response) {
console.log("Service Category Connected");
$scope.serviceCategory = response;
});
$http.get('/JsonData/Service.json').success(function (res) {
console.log("Service Connected");
$scope.service = res;
});
$scope.showData = function (inputData) {
var Project = new Object();
Project.Category = inputData.match1;
Project.SubCategory = inputData.match2;
Project.ServiceCategories = inputData.ServiceCategories;
Project.Description = inputData.DescribeProject;
Project.AboutProject = inputData.AboutProject;
var ProjectJson = JSON.stringify(Project);
alert(ProjectJson);
}
});

ng-disable tab/button when content in previous tab has not completed

I make a tab panel and declare it as form type, then i put validation ng-disabled in button& tab. i want the button available after i finish fill up two form,my button is disabled at first but when i finish fill up "first" form then it able to clicked. And also tab, it never disabled...
<div class="panel-body">
<form class="tab-content form-horizontal"name="formData" novalidate>
<div id="form-views" ui-view></div>
</form>
here my code:
button
<button type="button" ng-click="addPost()"
ngdisabled="formData.$invalid" class="btn btn-success">Submit
</button>
tab
<div class="col-lg-12 col-sm-12">
<div class="row">
<div class="col-lg-8 col-sm-8">
<div class="panel panel-tab rounded shadow">
<div class="panel-heading1 no-padding">
<ul class="nav nav-tabs nav-pills">
<li class="active" ui-sref=".personal" >
<a data-toggle="tab">
<i class="fa fa-user"></i>
<div>
<span class="text-strong">Step 1</span>
<span>Personal</span>
</div>
</a>
</li>
<li class="" ui-sref-active="active" ui-sref=".test" ng-disabled="formData.$invalid">
<a data-toggle="tab" >
<i class="fa fa-file-text"></i>
<div >
<span class="text-strong">Step 2</span>
<span>Test Date</span>
</div>
</a>
</li>
<li class="" ui-sref-active="active" ui-sref=".testDetail">
<a data-toggle="tab" >
<i class="fa fa-credit-card"></i>
<div>
<span class="text-strong">Step 3</span>
<span>Test Details</span>
</div>
</a>
</li>
</ul>
</div>
<div class="panel-sub-heading">
<div class="inner-all">
<progressbar class="progress-striped active no-margin progress-xs" value='20' max="100" type="success"><i></i></progressbar>
</div>
</div>
<div class="panel-body">
<form class="tab-content form-horizontal" name="formData"novalidate>
<div id="form-views" ui-view></div>
</form>
</div>
</div>
</div>
this is my "personal details" tab
<div class="tab-pane inner-all" id="tab3-1">
<h4 class="page-header">Personal</h4>
<div class="form-group">
<label class="col-sm-2">Name</label>
<div class="col-sm-6" ng-class="{ 'has-error' : formData.name.$invalid && !formData.name.$pristine }">
<input class="form-control" name="name" placeholder="Enter name" ng-model="formData.ngCandName" required>
<p ng-show="formData.name.$invalid && !formData.name.$pristine" class="help-block">Candidate name is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : formData.background.$invalid && !formData.background.$pristine }">
<label class="col-sm-2">University</label>
<div class="col-sm-6">
<input class="form-control" name="background" placeholder="Background" ng-model="formData.ngCandBackg" required>
<p ng-show="formData.background.$invalid && !formData.background.$pristine" class="help-block">Candidate background is required.</p>
</div>
</div>
<div class="form-group mb-0" >
<label class="col-sm-2">Gender</label>
<div class="col-sm-6" >
<div class="rdio rdio-theme inline mr-10">
<input type="radio" id="male3" ng-model="formData.gender" name="radio" value="male" required >
<label for="male3">Male</label>
</div>
<div class="rdio rdio-theme inline">
<input type="radio" id="female3" name="radio" ng-model="formData.gender" value="female" required>
<label for="female3">Female</label>
</div>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : formData.tel.$invalid && !formData.tel.$pristine }">
<label class="col-sm-2" >Telephone number</label>
<div class="col-sm-6">
<input type="number" ng-maxlength="11" class="form-control" name="tel" placeholder="Telephone number" ng-model="formData.ngCandTel" required>
<p ng-show="((formData.tel.$invalid && !formData.tel.$pristine))" class="help-block">Please insert telephone number.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : formData.Email.$invalid && !formData.Email.$pristine }">
<label class="col-sm-2">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" name="Email" placeholder="Email" ng-model="formData.ngCandEmail" required>
<p ng-show="formData.Email.$error.email" class="help-block">Candidate Email is invalid.</p>
</div>
</div>

AngularJs reading angular expression

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="angular/lib/angular.min.js"></script>
<script type="text/javascript" src="js/controller/studentinfo.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>
<span class="black-text">School Management Site</span>
</h1>
</div><!--header end-->
<div id="topmenu">
<ul>
<li>
HOME
</li>
<li>
STUDENTS
</li>
<li>
CLASS INFORMARION
</li>
<li>
LOGOUT
</li>
</ul>
</div><!--topmenu end-->
<div id="content">
<div class="jumbotron">
<div ng-controller="studentInfoController" ng-init="getStudentsInfo()">
<form name="studentform" ng-submit="submitStudentForm(studentform.$valid)" novalidate>
<div class="form-group">
<h3>Student Form:</h3>
<h4 style="color: red;">{{errorModel.errorMessage}}</h4>
<label for="rollno" style="color: blue;">StudentRollNo:</label>
<div class="col-sm-12">
<div class="col-sm-3">
<input type="text" class="form-control" id="rollno"
name="studentRollNo" ng-model="student.studentRollNo" required
placeholder="RollNo">
</div>
<div class="col-sm-9">
<span style="color: red"
ng-show="studentform.studentRollNo.$error.required && submitted">
StudentRollNo is required.</span>
</div>
</div>
</div>
<div class="form-group">
<label for="name" style="color: blue;">StudentName:</label>
<div class="col-sm-12">
<div class="col-sm-3">
<input type="text" class="form-control" id="studentName"
name="studentName" ng-model="student.studentName" required
placeholder="StudentName">
</div>
<div class="col-sm-9">
<span style="color: red"
ng-show="studentform.studentName.$error.required && submitted">
StudentName is required.</span>
</div>
</div>
</div>
<div class="form-group">
<label for="name" style="color: blue;">Address:</label>
<div class="form-group">
<div class="col-sm-12">
<div class="col-sm-3">
<input type="text" class="form-control" id="village"
name="village" ng-model="student.village"
placeholder="Village" >
</div>
</div>
</div>
<br/>
<br/>
<div class="col-sm-12">
<div class="col-sm-3">
<input type="text" class="form-control" id="districtName"
name="districtName" ng-model="student.districtName"
placeholder="DistrictName" >
</div>
<div class="col-sm-9">
<span style="color: red"
ng-show="studentform.districtName.$error.required && submitted">
DistrictName is required. </span>
</div>
</div>
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-sm-12">
<div class="col-sm-3">
<input type="text" class="form-control" id="state"
name="state" ng-model="student.state" required
placeholder="State">
</div>
<div class="col-sm-9">
<span style="color: red"
ng-show="studentform.state.$error.required && submitted">
StateName is required.</span>
</div>
</div>
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Total Number of Student:<label style="color: black">{{studentsData.length}}</label>
<table id="stuId" border="1" style="color: blue;">
<tr>
<th>StudentRollNo</th>
<th>StudentName</th>
<th>DELETE</th>
<td></td>
</tr>
<tr ng-repeat="student in studentsData" style="color: black;">
<td>
{{student.studentRollNo}}
</td>
<td>
{{student.studentName}}
</td>
<td>
<input type="button" name="info" value="DeleteStudent" ng-click = "deleteStudent({{student.addresId}})">
</td>
</tr>
</table>
</div>
</div>
</div><!--content endss-->
</div><!--container end-->
</body>
when we are loading this page we are getting error
my error is
Error: [$parse:syntax] http://errors.angularjs.org/1.3.15/$parse/syntax?p0=%7B&p1=invalid%20key&p2=16&p3=deleteStudent(%7B%7Bstudent.addresId%7D%7D)&p4=%7Bstudent.addresId%7D%7D)
at ib.equality (http://localhost:8080/SchoolSystem/angular/lib/angular.min.js:196:291)
how can reslove this error

Resources