Am trying to do angular form validation am not getting error message when i click on submit, i have added two text two receive to take first name and last name what went wrong i couldn't find please let me know
<!-- Bootstrap Core CSS -->
<link href="resources/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="resources/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="resources/sb-admin/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="resources/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Date picker css -->
<link rel="stylesheet" href="resources/datepicker/datepicker.min.css"></link>
<!-- My css -->
<link rel="stylesheet" href="resources/mine/css/MyCss.css"></link>
<script src="resources/js/angular/angular.js"></script>
<script src="resources/js/app/app.js"></script>
</head>
<body ng-app="myapp" ng-controller="mainController">
<div id="wrapper">
<!-- Navigation -->
<%# include file="Menu.jsp" %>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><b>Student Enrollment</b></h3>
</div>
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Basic Information for admin
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-body"> <!-- flot-chart previus class name -->
<form id="userForm" method="post" class="form-horizontal" action="login" ng-submit="submitForm()" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.terms.$invalid && (userForm.terms.$dirty || submitted)}">
<label class="col-xs-2 control-label">Student Full Name</label>
<div class="col-xs-3">
<input type="text" name="firstname" class="form-control" ng-model="user.name" placeholder="Your Name" ng-required="true">
<p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">Your First Name is required.</p>
</div>
<div class="col-xs-3">
<input type="text" name="name" class="form-control" ng-model="user.name" placeholder="Your Name" ng-required="true">
<p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">Your Last Name is required.</p>
</div>
</div>
<div class="form-group">
<div class="col-xs-1 ">
<button type="submit" class="btn btn-primary ">Submit</button>
</div>
<div class="col-xs-1 ">
<button type="reset" class="btn btn-default" id="rstbutton">Refresh</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script type="text/javascript" src="resources/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="resources/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="resources/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="resources/sb-admin/sb-admin-2.js"></script>
</body>
</html>
set name for form like to this name="userForm"
<form name="userForm">
<input type="text" name="name" ng-model="" >
<p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">Your Last Name is required.</p>
<input type="text" name="firsname" ng-model="" >
<p ng-show="userForm.firstname.$error.required && (userForm.firstname.$dirty || submitted)" class="help-block">Your First Name is required.</p>
</form>
Some code changes need to be made :
ng-model for both the text boxes should be different. In your code it is looking like same for both inputs.
name attribute value should be different if you want to perform different validations on both the fields.
Working demo :
var app = angular.module('myApp',[]);
app.controller('myController',function( $scope ) {
$scope.validate = function() {
alert('submitting..');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app= "myApp" ng-controller="myController">
<form name="userForm" ng-submit="userForm.$valid && validate()" novalidate>
<div class="form-group">
<label class="col-xs-2 control-label">Student Full Name</label>
<div class="col-xs-3">
<input type="text" name="firstname" class="form-control" ng-model="user.firstname" placeholder="Your Name" ng-required="true">
<p ng-show="submitted == true && userForm.firstname.$error.required" class="help-block">Your First Name is required.</p>
</div>
<div class="col-xs-3">
<input type="text" name="lastname" class="form-control" ng-model="user.lastname" placeholder="Your Name" ng-required="true">
<p ng-show="submitted == true && userForm.lastname.$error.required" class="help-block">Your Last Name is required.</p>
</div>
</div>
<input type="submit" value="Submit" ng-click="submitted = true"/>
</form>
</div>
Related
I am learning AngularJS and I got a beta project to modify the exisiting model. I cannot post the below form through api. When i click on submit button, the dasboard is senseless. can some one guide me how to move further. This is Angular version:1.6.0. I have passed the ng-submit as startApproval in form element.. But it doesn't workout
index.html
<form ng-controller="RequestController" method="post" ng-submit="startApproval()">
<div class="container">
<div class="row" ng-submit>
<p class="text-info">Please create request...</p>
<!-- Left -->
<div class="col-lg-2">
<div class="panel panel-primary">
<!-- Heading -->
<div class="panel-heading">
<h4>Request</h4>
</div>
<!-- Body -->
<div class="panel-body">
<!-- process type -->
<div class="groups list list-inset">
<div class="form-group">
<label for="generic_process_id">Select process typ:</label>
<select class="form-control" id="generic_process_id" ng-model="request.approvalObject.generic_process_id" >
<option value="1" ng-show="true" >Simple Process</option>
<!-- <option ng-hide= "true" ng-disabled="true" value="2">2</option>
<option ng-hide= "true" ng-disabled= "true" value="3">3</option>
<option ng-hide= "true" ng-disabled= "true" value="4">4</option>-->
</select>
</div>
</div>
</div>
</div>
<div class="panel panel-warning">
<!-- Heading -->
<div class="panel-heading">
<h4>Priority</h4>
</div>
<!-- Body -->
<div class="panel-body">
<!-- priority type -->
<div class="groups list list-inset">
<label>Select priority:</label><br>
<div class="btn-group" ng-init="request.approvalObject.priority='1'">
<label class="btn btn-info" ng-model="request.approvalObject.priority" uib-btn-radio="'1'" uncheckable>Low</label>
<label class="btn btn-info" ng-model="request.approvalObject.priority" uib-btn-radio="'2'" uncheckable>High</label>
</div>
</div>
<hr>
</div>
</div>
</div>
<!-- Center -->
<div class="col-lg-6">
<!-- Description part-->
<div class="panel panel-success">
<!-- Heading -->
<div class="panel-heading">
<h4>Description</h4>
</div>
<pre>{{request.approvalObject|json}}</pre>
<pre>{{request.form|json}}</pre>
</div>
</div>
<!-- Right -->
<div class="col-lg-4">
<!-- value part-->
<div class="panel panel-info">
<!-- Heading -->
<div class="panel-heading">
<h4>Value</h4>
</div>
<!-- Body -->
<div class="panel-body">
<div class="groups list list-inset">
<label class="item item-input">
<input type="text" placeholder="" name="value" ng-model="request.approvalObject.value"><b class="text-primary">{{request.approvalObject.value_currency}}</b>
</label>
<br>
</div>
</div>
<div class="panel panel-info">
<!-- Heading -->
<div class="panel-heading">
<h4>Approver</h4>
</div>
<!-- Body -->
<div class="panel-body">
<div class="groups list list-insert">
<label class="item item-input">
<input type="text" placeholder="First approver name" name="approver1_name" ng-model="request.approvalObject.approver1_name">
</label>
</div>
<!-- show second approver if process type != 1 -->
<div ng-show="secondApprover" class="groups list list-insert">
<label class="item item-input">
<input type="text" placeholder="Second approver name" name="approver2_name" ng-model="request.approvalObject.approver2_name" >
</label>
</div>
</div>
</div>
</div>
</div>
<input type="submit" value="request">
</form>
Controller.js
'use strict';
export default class RequestController {
approvalObject = {};
form = {};
secondApprover = false;
$onInit() {
this.approvalObject.generic_process_id=1;
this.approvalObject.value_currency="EUR";
this.approvalObject.priority=1;
this.form.type=1;
}
/*#ngInject*/
constructor($http, $scope, socket) {
this.$http = $http;
console.log("testentry");
}
startApproval(approvalObject) {
console.log("test");
// creator_email and name from backend
approvalObject.generic_process_id=1;
approvalObject.creator_email= "test1#example.com";
approvalObject.creator_name= "test1";
approvalObject.approver1_email= approvalObject.approver1_name+"#example.com";
approvalObject.approver2_email= approvalObject.approver2_name+"#example.com";
// wip from backend
approvalObject.approval_process_status= "wip";
approvalObject.priority= "super high";
//date_of_creation: '', -->> filled by database
approvalObject.date_of_expiration = undefined;
approvalObject.sending_tool= "Web-App";
approvalObject.submitRequest=true;
this.$http.post('/api/approvals', approvalObject);
}
}
The startApproval(approvalObject)method in your controller expecting input parametar object. but you are calling with out passing any object to the function on ng-submit in your html
you can clear the input parameter in your controller and you can access thos variables in funtion with 'this'keyword like
this.approvalObject.generic_process_id=1;
I have dropdown in model popup and want to do required field validation here. My code is following.. But the code is not done the validation..
<div class="form-group form-group-sm">
<label for="itClassification" class="control-label text-xs
col-xs-12 col-sm-4 col-md-4 col-lg-4">IT Classification :
</label>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<select class="form-control" id="itClassification"
name="itClassification" ng-model="itClassification"
ng-options="ic.itId as ic.itClassificationName for ic in
itClassifications" placeholder="select IT Classification"
required>
<option value="" ng-selected="selected">Select IT
Classification</option>
</select>
<div class="help-block" ng-messages="addClientModal.itClassification.$error"
ng-if="addClientModal.itClassification.$dirty && addClientModal.itClassification.$invalid">
<p class="text-danger small" ng-message="required"><strong>ITClassification is required.</strong>
</p>
</div>
</div>
</div>
Can anyone help me to solve this..?
Thanks in advance
Just add ngform tag
<div class="form-group form-group-sm">
<ng-form name="addClientModal">
// other tags
</ng-form>
</div>
Here i added form name as addClientModal see Example
Check this is the answer. You need to use validations on form name->form control name. Here is Plunkr http://plnkr.co/edit/bKEVv4kfnSJFd0w29Zdl?p=preview
var app = angular.module('myApp', ['ngMessages']);
app.controller('TestController', function($scope) {
//$scope.itClassification = null;
$scope.optionsList = [
{'label':'One','value':'1'},
{'label':'Two','value':'2'},
{'label':'Three','value':'3'},
{'label':'Four','value':'4'},
{'label':'Five','value':'5'},
{'label':'Six','value':'6'},
{'label':'Seven','value':'7'},
{'label':'Eight','value':'8'},
{'label':'Nine','value':'9'},
{'label':'Ten','value':'10'},
]
$scope.listItemChanged=function(schedule){
alert($scope.itClassification)
};
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script data-require="ng-messages#*" data-semver="1.3.16" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-messages.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="TestController">
<form name="userForm" autocomplete="off">
<div class="form-group form-group-sm">
<label for="itClassification" class="control-label text-xs col-xs-12 col-sm-4 col-md-4 col-lg-4">IT Classification :</label>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<select class="form-control" id="itClassification" name="itClassification" ng-model="itClassification" ng-options="listItem.label as listItem.value for listItem in optionsList" placeholder="select IT Classification" required>
<option value="" ng-selected="selected">Select IT Classification</option>
</select>
<div class="help-block" ng-messages="userForm.itClassification.$error">
<p class="text-danger small" ng-message="required"><strong>ITClassification is required.</strong>
</p>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
I need one example for validations on dynamic added fields. Here is my page.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js">
</script>
<title>Add Remove in AngularJS</title>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.deleted = [];
$scope.inputs = [];
$scope.addRow = function(){
$scope.inputs.push({name:'', age:''});
};
$scope.removeRow = function(index, input){
// alert(index);
// alert(input);
$scope.deleted.push(input);
$scope.inputs.splice(index,1);
};
});
</script>
</head>
<body style="background-color: gray; margin-top: 10px; ">
<center>
<div class="row" ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-6">
<div class="panel panel-flat">
<div class="panel-header">
<h4>
Person Address
<button ng-click="addRow()">Add</button>
</h4>
</div>
<div class="panel-body">
<form name="form" class="form-horizontal">
<div ng-repeat="input in inputs">
<div class="form-group" ng-class="{'has-error' : form.name.$invalid}">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name[$index]" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span class="help-block" ng-show="form.name[$index].$error.pattern">Alphabet only</span>
<span class="help-block" ng-show="form.name[$index].$error.minlength">Too Short</span>
<span class="help-block" ng-show="form.name[$index].$error.maxlength">Too Long</span>
<span class="help-block" ng-show="form.name[$index].$error.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span ng-show="form.age.$invalid && form.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button ng-click="removeRow($index, input)">Remove</button>
<hr>
</div>
</form>
</div>
</div>
</div>
<!-- inputs :{{inputs}}<br>deleted : {{deleted}} -->
</div>
</center>
</body>
</html>
You can add a fonction to you controller :
app.controller('myCtrl', function($scope) {
//...
$scope.validationFn = function () {
//do you validation here
};
then you just need to modify
<form name="form" class="form-horizontal" ng-submit="validationFn()">
Here is the answer:
<div class="panel-body"><form name="form" class="form-horizontal">
<div ng-repeat="input in inputs"><ng-form name="sfIn"><div class="form-group" >
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span
class="help-block" ng-show="sfIn.name.$error.pattern">Alphabet only</span>
<span
class="help-block" ng-show="sfIn.name.$error.minlength">Too Short</span>
<span
class="help-block" ng-show="sfIn.name.$error.maxlength">Too Long</span>
<span
class="help-block" ng-show="sfIn.name.$touched.required || sfIn.name.$error.required ||
sfIn.name.$dirty.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span
ng-show="sfIn.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button
ng-click="removeRow($index, input)">Remove</button>
</ng-form>
<hr>
</div>
</form>
</div>
I have a form that I want to validate with ng-click, I have some required fields e some fields like email.
<form role="form" name="cadastroEmpresa"
novalidate>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6">
<div class="form-group">
<label>Nome</label>
<input class="form-control"
placeholder="Nome da empresa"
ng-model="empresa.nome">
</div>
<div class="form-group">
<label>CNPJ</label>
<input
id="cnpj"
class="form-control"
placeholder="Entre com o CNPJ"
ng-model="empresa.cnpj">
</div>
<div class="form-group">
<label>Endereço</label>
<input type="email"
name="inputemail"
class="form-control"
placeholder="Entre com o endereço pela empresa"
ng-model="empresa.endereco">
</div>
<div class="form-group">
<label>Email</label>
<input
type="email"
class="form-control"
placeholder="Email da empresa"
ng-model="empresa.email">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Nome do Responsável</label>
<input class="form-control"
placeholder="Nome do responsável da empresa"
ng-model="empresa.nomeResponsavel" required>
</div>
<div class="form-group">
<label>Telefone</label>
<input class="form-control"
id="telefone"
placeholder="Telefone fixo"
ng-model="empresa.telefone" required>
</div>
<div class="form-group">
<label>Celular</label>
<input class="form-control"
id="celular"
ng-model="empresa.celular"
placeholder="Telefone celular">
</div>
<div class="form-group">
<label>Data de Vencimento</label>
<input class="form-control"
ng-model="empresa.dataVencimentoMensalidade"
placeholder="Data de Vencimento da Mensalidade">
</div>
</div>
</div>
</div>
</form>
I Want to validate when user clicks the button, and mark in red the field that have erros, but I'm pretty new with angular so I not sure how I do that, if some one could give me example I'll be able to finish my application. Thank you everyone.
As mentioned in Gonzalo's answer, "you should be add attribute name to the inputs that you want validate".
After it, you can use ngMessages to validate your inputs.
Here's a snippet working:
var app = angular.module('app', ['ngMessages']);
app.controller('mainCtrl', function ($scope) {
// Any JS code.
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" ></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular-messages.js"></script>
</head>
<body ng-controller="mainCtrl">
<form role="form" name="form" novalidate>
<div class="form-group" ng-class="{ 'has-error' : form.nome.$touched && form.nome.$invalid }">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6">
<div class="form-group">
<label>Nome</label>
<input name="nome" class="form-control" placeholder="Nome da empresa" ng-model="empresa.nome" required="" />
</div>
<div class="help-block" ng-messages="form.nome.$error" ng-if="form.nome.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
</div>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : form.cnpj.$touched && form.cnpj.$invalid }">
<label>CNPJ</label>
<input id="cnpj" name="cnpj" class="form-control" placeholder="Entre com o CNPJ" ng-model="empresa.cnpj" required="" />
<div class="help-block" ng-messages="form.cnpj.$error" ng-if="form.cnpj.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : form.end.$touched && form.end.$invalid }">
<label>Endereço</label>
<input name="end" class="form-control" placeholder="Entre com o endereço pela empresa" ng-model="empresa.endereco" required="" />
<div class="help-block" ng-messages="form.end.$error" ng-if="form.end.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : form.email.$touched && form.email.$invalid }">
<label>Email</label>
<input type="email" name="email" class="form-control" placeholder="Email da empresa" ng-model="empresa.email" />
<div class="help-block" ng-messages="form.email.$error" ng-if="form.email.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
<div class="col-lg-6" ng-class="{ 'has-error' : form.resp.$touched && form.resp.$invalid }">
<div class="form-group">
<label>Nome do Responsável</label>
<input name="resp" class="form-control" placeholder="Nome do responsável da empresa" ng-model="empresa.nomeResponsavel" required="" />
<div class="help-block" ng-messages="form.resp.$error" ng-if="form.resp.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : form.fixo.$touched && form.fixo.$invalid }">
<label>Telefone</label>
<input name="fixo" class="form-control" id="telefone" placeholder="Telefone fixo" ng-model="empresa.telefone" required="" />
<div class="help-block" ng-messages="form.fixo.$error" ng-if="form.fixo.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : form.celular.$touched && form.celular.$invalid }">
<label>Celular</label>
<input name="celular" class="form-control" id="celular" ng-model="empresa.celular" placeholder="Telefone celular" />
<div class="help-block" ng-messages="form.celular.$error" ng-if="form.celular.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : form.data.$touched && form.data.$invalid }">
<label>Data de Vencimento</label>
<input name="data" class="form-control" ng-model="empresa.dataVencimentoMensalidade" placeholder="Data de Vencimento da Mensalidade" />
<div class="help-block" ng-messages="form.data.$error" ng-if="form.data.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
<div class="form-group">
<input type="submit" name="commit" value="Criar empresa" class="btn btn-primary" ng-disabled="form.$invalid">
<a class="btn btn-default" href="#">Cancelar</a>
</div>
</div>
</form>
</body>
</html>
I would recommend you to check this tutorial also.
PS: As you may have noticed I commented all the "ng-include" (which contains the file that contains all the messages to show when input is invalid) that I put, because I don't know even if is possible to add a new "file" here in snippet, but I'm posting here almost the complete code and you can check the complete here.
error-messages.html:
<p ng-message="required">This field is required</p>
<p ng-message="minlength">This field is too short</p>
<p ng-message="maxlength">This field is too long</p>
<p ng-message="required">This field is required</p>
<p ng-message="email">This needs to be a valid email</p>
I hope it helps!!
Firstly, you should be add attribute name to the inputs that you want validate.
Then In the controller, more specifically in the $scope object, you have available a key with the name of your form, and inside this, keys associated to each input that you added a name attrubute.
Example based in your html:
angular
.module('exampleApp')
.controller('ExampleController', Controller);
Controller.$inject = ['$scope'];
function Controller($scope){
var vm = this;
var theForm = $scope.cadastroEmpresa;
console.log(theForm);
vm.handleValidation = function(){
var theForm = $scope.cadastroEmpresa;
console.log($scope);
console.log($scope.cadastroEmpresa);
}
}
Working
http://codepen.io/gpincheiraa/pen/GqEmNP
Form validation works when automatically when you submit the form. So you should add a submit type button anywhere inside the form like:
<button type="submit" class="btn btn-primary">Submit data</button>
And if you now require proper validation message and if you are using Bootstrap library, you can check out this library to provide validation messages in Angular with Bootstrap.
You just need to create a CSS for that, angular already adds the required classes for validation.
this class is added automatically to required fields, you just need to give it your style, for example:
.ng-submitted .ng-invalid {
color: #f00;
border: 1px solid #f00;
}
Codepen: http://codepen.io/giannidk/pen/Bzkkaj?editors=1001
Problem Definition
I am using AngularJS's ngRoute module for the first time and I am running into some trouble with it. I have a index.cshtml page in which I reference my routingModule by setting the ng-app. I also have a ng-view so that when I click on "New Account" it loads register.cshtml in the ng-view or if I click on "Sign In" it will load authenticate.cshtml in the ng-view.
The routing is working as expected since I can see the register and authenticate pages load in the ng-view when I click the links in on my index page. But the controllers I have set for the register and authenticate pages in the routingModule.js seem to not be there.
I get this error when clicking on "New Account" on the index page.
I get the same error when I click on "Sign In" on the index page
I have added all the javascript and html files below needed to solve the problem. Any help would be much appreciated.
Webroot Structure
routingModule.js
var routingModule = angular.module("routingModule", ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('/account/register', { templateUrl: '/account/register/', controller: 'RegisterController' });
$routeProvider.when('/account/authenticate', { templateUrl: '/account/authenticate/', controller: 'AuthenticateController' });
})
index.cshtml
<!DOCTYPE html>
<html ng-app="routingModule">
<head>
<base href="/" />
<script src="~/Scripts/JQuery/jquery-2.1.3.js"></script>
<script src="~/Scripts/Angular/angular.min.js"></script>
<script src="~/Scripts/Angular/angular-route.min.js"></script>
<script src="~/Scripts/Angular/angular-resource.min.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/boostrap-hero.min.css" rel="stylesheet" />
<script src="~/Scripts/Bootstrap/bootstrap.min.js"></script>
<script src="/Scripts/app/Registration/registerModule.js"></script>
<script src="/Scripts/App/Registration/registerService.js"></script>
<script src="/Scripts/App/Registration/registerController.js"></script>
<script src="/Scripts/App/Registration/validatePasswordDirective.js"></script>
<script src="~/Scripts/App/Authentication/authenticateModule.js"></script>
<script src="~/Scripts/App/Authentication/authenticateController.js"></script>
<script src="~/Scripts/App/Authentication/authenticateService.js"></script>
<script src="~/Scripts/App/Routing/routingModule.js"></script>
<meta name="viewport" content="width=device-width" />
<title>AngularJS + ASP.NET MVC</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="navbar navbar-default">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li><span class="navbar-brand">AngularJS + ASP.NET Playground</span></li>
</ul>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li> Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Sign In</li>
<li> New Account</li>
</ul>
</div>
</div>
</div>
<div ng-view></div>
</div>
</body>
</html>
register.cshtml
<form name="registerForm" novalidate>
<div class="row">
<div class="col-md-10">
<h2>Create Account</h2>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Username</label>
<input type="text" name="userName" ng-model="user.userName" class="form-control" required />
<div class="text-danger" ng-show="registerForm.userName.$error.required && registerForm.userName.$dirty">Please enter your first name</div>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" ng-model="user.email" class="form-control" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" />
<div class="text-danger" ng-show="registerForm.email.$error.required && registerForm.email.$dirty">Please enter a your email address</div>
<div class="text-danger" ng-show="registerForm.email.$error.pattern && registerForm.email.$dirty">Invalid email address</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" ng-model="user.password" class="form-control" required />
<div class="text-danger" ng-show="registerForm.password.$error.required && registerForm.password.$dirty">Please enter a password</div>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="passwordConfirm" ng-model="user.passwordConfirm" class="form-control" required compare-to="user.password" />
<div class="text-danger" ng-show="registerForm.passwordConfirm.$error.required && registerForm.passwordConfirm.$dirty">Please repeat your password</div>
</div>
<div class="form-group">
<button class="btn btn-default" ng-disabled="registerForm.$invalid" ng-click="register(user)">Create Account</button>
<div style="color: red;" ng-show="errors.length > 0" ng-repeat="error in errors">{{error}}</div>
</div>
</div>
</div>
</form>
authenticate.cshtml
<form name="loginForm" novalidate>
<div class="row">
<div class="col-md-10">
<h2>Sign In</h2>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Email</label>
<input type="text" name="email" ng-model="user.email" class="form-control" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" />
<div class="text-danger" ng-show="loginForm.email.$error.required && loginForm.email.$dirty">Please enter a your email address</div>
<div class="text-danger" ng-show="loginForm.email.$error.pattern && loginForm.email.$dirty">Invalid email address</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" ng-model="user.password" class="form-control" required />
<div class="text-danger" ng-show="loginForm.password.$error.required && loginForm.password.$dirty">Please enter a password</div>
</div>
<div class="form-group">
<button class="btn btn-default" ng-disabled="loginForm.$invalid" ng-click="authenticate(user)">Sign In</button>
<div style="color: red;" ng-show="errors.length > 0" ng-repeat="error in errors">{{error}}</div>
</div>
</div>
</div>
</form>
registerModule.js
var registerModule = angular.module("registerModule", ["ngResource"]);
registerController.js
registerModule.controller("RegisterController", function ($scope, $location, registerService) {
$scope.register = function (user) {
$scope.errors = [];
registerService.register(user).$promise.then(
function () { $location.url('/home/index');},
function (response){$scope.errors = response.data});
};
});
registerService.js
registerModule.factory('registerService', function ($resource) {
return {
register: function(user) {
return $resource('/api/account/register/').save(user);
}
}
});
From what i can see here, the authenticationModule and registerModule are missing as dependencies of your routingModule:
var routingModule = angular.module("routingModule", ['ngRoute', 'authenticationModule', 'registerModule'])