this is my input
aby-saturn#gmail.com
hyphen is not working in emailid getting invalid email id
this is my ng-pattern
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input class="form-control" type="email" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" noncapitalize required />
</div>
<div style="color: red" id="emailError"></div>
<span style="color:red;" class="email-error" ng-show="loginForm.submitted && loginForm.email.$error.required">Required</span>
<span style="color:red" class="error" ng-show="loginForm.submitted && loginForm.email.$error.pattern">Email not valid</span>
</div>
Here is a regexp for email validation.
^[\w-]+(\.[\w-]+)*#([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$
You can test this regexp here
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input class="form-control" type="text" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="/^[\w-]+(\.[\w-]+)*#([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$/" noncapitalize required />
</div>
<div style="color: red" id="emailError"></div>
<span style="color:red;" class="email-error" ng-show="myForm.email.$error.required">Required</span>
<span style="color:red" class="error" ng-show="myForm.email.$error.pattern">Email not valid</span>
</div>
</form>
</body>
</html>
PLEASE RUN THE ABOVE SNIPPET
Here is a working DEMO
I guess you don't want to allow '-' to be in the email address, here is what I got using ng-pattern and if you want '-' to be allowed check 2nd example:
1) If '-' is not allowed:
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.user = {
email: 'test#test.com'
};
$scope.emailPattern = /^(([^-<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<form name="loginForm">
<div class="form-group">
<div class="input-group">
<input class="form-control" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="emailPattern" noncapitalize required />
</div>
<div style="color: red" id="emailError">
<span style="color:red;" class="email-error" ng-show="loginForm.email.$error.required">Required</span>
<span style="color:red" class="error" ng-show="loginForm.email.$error.pattern">Email not valid, doesn't match the provided pattern</span>
</div>
</div>
</form>
</div>
2) If '-' is allowed:
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.user = {
email: 'test#test.com'
};
$scope.emailPattern = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<form name="loginForm">
<div class="form-group">
<div class="input-group">
<input class="form-control" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="emailPattern" noncapitalize required />
</div>
<div style="color: red" id="emailError">
<span style="color:red;" class="email-error" ng-show="loginForm.email.$error.required">Required</span>
<span style="color:red" class="error" ng-show="loginForm.email.$error.pattern">Email not valid, doesn't match the provided pattern</span>
</div>
</div>
</form>
</div>
Related
How do I set/show error messages for min and max values that I set on an input field with number type using angular js.
<input type="number" min="0.1" max="30"/>
Please use below code to show error message for min and max value in number input type field using angularjs validation.
For ng-maxlength and ng-minlength for Number input type field.
<form name="myForm">
<input type="number" name="count" ng-model="count" max="30" min="0.1">
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.min">Count should be above 0.1.</span>
<span ng-show="myForm.user.$error.max">Count should be below 30.</span>
</span>
</form>
For maxlength and minlength for Text input type field.
<form name="myForm">
<input type="text" name="username" ng-model="username" ng-minlength="5" ng-maxlength="15">
<span style="color:red" ng-show="myForm.username.$dirty && myForm.user.$invalid">
<span ng-show="myForm.username.$error.minlength">Username should be minimum 5 character.</span>
<span ng-show="myForm.username.$error.maxlength">Username should be maximum 15 character.</span>
</span>
</form>
You need to encapsulate the input inside the form and conditionally display the error messages:
var app = angular.module('app', []);
app.controller('test', function($scope) {
$scope.model = {};
});
.error {
color: red;
}
input {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
<form novalidate name="myForm">
<label for="model.data">Enter Data:</label>
<input type="number" name="data" ng-model="model.data" min="0.1" max="30" />
<div class="error" ng-show="myForm.data.$dirty && myForm.data.$error.min" ng-message="min">Unexpected minimum data</div>
<div class="error" ng-show="myForm.data.$dirty && myForm.data.$error.max" ng-message="max">Unexpected maximum data</div>
</form>
</div>
Simple :
<p class="help-block" ng-message="min || max">please enter in between 0.1 to 30.</p>
or
<p class="help-block" ng-message="min">Min 0.1 required</p>
<p class="help-block" ng-message="max">Max 30 Allowd</p>
Add required to input field.
here is SAMPLE CODE and fiddle.
https://jsfiddle.net/nc4n61bk/
<form>
<input type="number" min="0.1" max="30" required/>
<input type="submit"/>
</form>
var app = angular.module('app', []);
app.controller('test', function($scope) {
$scope.model = {};
});
.error {
color: red;
}
input {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
<form novalidate name="myForm">
<label for="model.data">Enter Data:</label>
<input type="number" name="data" ng-model="model.data" min="0.1" max="30" />
<div class="error" ng-show="myForm.data.$dirty && myForm.data.$error.min" ng-message="min">Unexpected minimum data</div>
<div class="error" ng-show="myForm.data.$dirty && myForm.data.$error.max" ng-message="max">Unexpected maximum data</div>
</form>
</div>
.valueError{
color: rgb(255, 0, 0);
padding-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
<form novalidate name="myForm">
<div class="form-field required-field">
<label for="field-value">Value</label>
<input type="number" id="field-value" name="valueInput" class="small form-control input-md ng-valid ng-dirty" ng-model="value" min="5" placeholder="Value"/>
<div class="valueError" ng-show="form.value.$dirty && form.value.$error.min "> Value must be atleast 5min</div>
</div>
</form>
</div>
in my code buttons are created correctly but after typing the first row,click Add fields.the close button is disabled in first row.but i want only disable in current typing row.other close buttons are enable.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="okay.js">
</script>
</head>
<body ng-app="testApp">
<div ng-controller="MainCtrl">
<form name="frm" class="form-inline" novalidate>
<div class="form-group">
<input type="string" name="cat_name" class="form-control" ng-model="cat_name" placeholder="Enter Category Name" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="text" name="cat_desc" class="form-control" ng-model="cat_desc" placeholder="Enter Your Description" ng-pattern="/^[a-zA-Z]*$/" required>
</div> <br>
<fieldset data-ng-repeat="choice in choices track by $index ">
<br>
<div class="form-group"> <input type="text" ng-model="choice.itemName" class="form-control" name="item_name" placeholder="Category Item Name" ng-pattern="/^[a-zA-Z]*$/" required>
<div class="form-group">
<input type="text" ng-model="choice.itemDesc" class="form-control" name="item_desc" placeholder="Category Description" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="number" ng-model="choice.itemView" class="form-control" name="item_count" ng-pattern="/^[0-9]/"placeholder="Category Item View Count" required>
<p class="help-block" ng-show="frm.item_count.$error.pattern">numbers only allowed</p>
<select id="country" ng-model="choice.states" name="state" ng-options="country for (country, states) in countries">
</div>
<div class="form-group">
<option value=''>Choose</option>
</select>City:
<select id="state" ng-disabled="!choice.states" name="city" ng-model="one">
<option value="">Choose</option>
<option ng-repeat="state in choice.states" value="{{state.id}}">{{state.city}}</option>
</select>
</div>
<button ng-click="removeChoice()" class="remove btn btn-danger" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.item_name.$invalid||frm.item_desc.$invalid">close</button>
</fieldset>
<br>
<button class="addfields btn btn-success" ng-click="addNewChoice()" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.item_name.$invalid||frm.item_desc.$invalid">Add fields</button>
<button class="addfields btn btn-success" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.item_name.$invalid||frm.item_desc.$invalid " >Save</button>
<span class="help-block" style="color:red"ng-show="frm.cat_desc.$error.pattern" style:"color:red">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red"ng-show="frm.item_desc.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red"ng-show="frm.cat_name.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block"style="color:red" ng-show="frm.item_name.$error.pattern">ERROR:<BR/>text only allowed</span > </div>
<div id="choicesDisplay">
{{ newItemNo }}
</div>
</form>
</div>
</body>
</html>
okay. js (angular File)
var app=angular.module('testApp', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
$scope.choices.splice(this.$index,1);
};
$scope.countries = {
'Andhra': [{
'id': '01',
'city': "Guntur"
}, {
'id': '02',
'city': "Hyderabad"
}],
'Tamilnadu': [{
'id': '03',
'city': "CBE"
}, {
'id': '04',
'dep': "Trichy"
}]
};
});
You had a few issues in your HTML that I cleaned up but primarily your issue was that you needed to perform your validation on just the current row. So you can add an ng-form attribute along with your ng-repeat to create a scope per row. The resulting HTL looks like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="okay.js"></script>
</head>
<body ng-app="testApp">
<div ng-controller="MainCtrl">
<form name="frm" class="form-inline" novalidate>
<div class="form-group">
<input type="string" name="cat_name" class="form-control" ng-model="cat_name" placeholder="Enter Category Name" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="text" name="cat_desc" class="form-control" ng-model="cat_desc" placeholder="Enter Your Description" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<br>
<fieldset data-ng-repeat="choice in choices track by $index" ng-form="formChoice">
<br>
<div class="form-group">
<input type="text" ng-model="choice.itemName" class="form-control" name="item_name" placeholder="Category Item Name" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="text" ng-model="choice.itemDesc" class="form-control" name="item_desc" placeholder="Category Description" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="number" ng-model="choice.itemView" class="form-control" name="item_count" ng-pattern="/^[0-9]/" placeholder="Category Item View Count" required>
<p class="help-block" ng-show="formChoice.item_count.$error.pattern">numbers only allowed</p>
<select id="country" ng-model="choice.states" name="state" ng-options="country for (country, states) in countries"></select>
</div>
<div class="form-group">
<option value=''>Choose</option>
City:
<select id="state" ng-disabled="!choice.states" name="city" ng-model="one">
<option value="">Choose</option>
<option ng-repeat="state in choice.states" value="{{state.id}}">{{state.city}}</option>
</select>
</div>
<button ng-click="removeChoice()" class="remove btn btn-danger" ng-disabled="!formChoice.item_name.$dirty||!formChoice.item_desc.$dirty||!formChoice.item_count.$dirty||!formChoice.state.$dirty||!formChoice.city.$dirty||formChoice.item_name.$invalid||formChoice.item_desc.$invalid">close</button>
</fieldset>
<br>
<button class="addfields btn btn-success" ng-click="addNewChoice()" ng-disabled="frm.$invalid">Add fields</button>
<button class="addfields btn btn-success" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.$invalid||frm.item_desc.$invalid ">Save</button>
<span class="help-block" style="color:red" ng-show="frm.cat_desc.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red" ng-show="frm.item_desc.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red" ng-show="frm.cat_name.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red" ng-show="frm.item_name.$error.pattern">ERROR:<BR/>text only allowed</span >
<div id="choicesDisplay">{{ newItemNo }}</div>
</form>
</div>
</body>
</html>
This is code we can validate in normal function:
<p>Username:<br>
<input type="text" name="username" ng-model="username" required>
<span style="color:red" ng-show="articleForm.username.$dirty && articleForm.username.$invalid">
<span ng-show="articleForm.username.$error.required">Username is required.</span>
</span>
</p>
But when I have title field that have code:
<header class="list-group-item-text">
<label>Title</label>
<input type="text" name="title" ng-model="$parent.mopost.title" class="form-control" required>
<span class="help-inline" ng-show="articleForm.$parent.mopost.title.$error.required">Required</span>
</header>
And controller:
$scope.mopost = {title:"",content1:"",content2:"",linkaudio:""};
Now validate in Angular, it does not operate. How I can validate attribute of object same above.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<h2>Validation</h2>
<form ng-app="myApp" ng-controller="demoCtrl" name="articleForm" novalidate>
<header class="list-group-item-text">
<label for="title">Title</label>
<input id="title" type="text" name="user" ng-model="user" class="form-control" required>
<span ng-show="articleForm.user.$error.required">Username is required.</span>
</header>
<input type="submit" ng-disabled="articleForm.user.$dirty && articleForm.user.$invalid ||
articleForm.email.$dirty && articleForm.email.$invalid">
</form>
<script>
var app = angular.module('myApp', []);
app.controller('demoCtrl', function($scope) {
$scope.title = '';
});
</script>
</body>
</html>
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>
here is the angular code.
.controller("myStuList", ['$scope', "weejoinMessage", "httpServer", "$modal", "ngWeeJoinServer", "stuServer", function ($scope, weejoinMessage, httpServer, $modal, server, stuServer) {
//第一次进入是加载所有学员数据
$scope.stuinfos = infos.info; // i give the data form info.info to stuinfos.
//
$scope.course = '';
$scope.class = '';
$scope.name = '';
$scope.age = '';
$scope.scores = '';
$scope.createNew = function () {
httpServer.httpHandle({
url: stuBag.action.createNew,
data: {
courseId: $scope.course,
classId:$scope.class,
stuname: $scope.name,
age: $scope.age,
scores: $scope.scores
},
success: function (data) {
weejoinMessage.messageSuccess("添加成功！");
$scope.stuinfos.push({ 'CourseName': $scope.course, 'ClassName': $scope.class, 'StuName': $scope.name, 'Age': $scope.age, 'Scores': $scope.scores });
}
});
};
please help to see the problem. all the validation message show up togather when open the create page.
look down the html code .i want to show the validation message when click on the input text. and when the input message is wrong according to the validation . and show the message below the input texbox.
<div ng-app="stu.info" ng-controller="myStuList">
<form name="createnew_form" class="form-horizontal" role="form" ng-submit="createNew()" novalidate>
<div class="form-group">
<label for="stuname" class="col-md-2 control-label">姓名</label>
<div class="col-md-4">
<input type="text" class="form-control" placeholder="姓名" name="stuname" ng-model="name" ng-minlength=3 ng-maxlength=20 required />
<div class="error" ng-show="createnew_form.stuname.$dirty && createnew_form.stuname.$invalid">
<small class="error" ng-show="createnew_form.stuname.$error.required">
请输入姓名
</small>
<small class="error" ng-show="createnew_form.stuname.$error.minlength">
至少输入两个字
</small>
<small class="error" ng-show="createnew_form.stuname.$error.maxlength">
最多输入五个字
</small>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">年龄</label>
<div class="col-md-4">
<input type="number" min="0" max="100" required class="form-control" name="age"
ng-model="age" />
<div class="error-container" ng-show="createnew_form.age.$dirty && createnew_form.age.$invalid">
<small class="error" ng-show="createnew_form.age.$error.required">
请输入年龄
</small>
<small class="error" ng-show="createnew_form.age.$error.min">
最小年龄为0
</small>
<small class="error" ng-show="createnew_form.age.$error.max">
最大年龄为100
</small>
</div>
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="确认添加" class="btn btn-primary" />
</div>
</div>
</form>
</div>
I have used your code on jsFiddle and the form validation is working as expected.
I'm not seeing all the error messages together as you've mentioned. Please see the fiddle here: http://jsfiddle.net/giri_jeedigunta/4508cd4r/
Your HTML Code:
<div ng-app="stu.info" ng-controller="myStuList">
<form name="createnew_form" class="form-horizontal" role="form" ng-submit="createNew()" novalidate>
<div class="form-group">
<label for="stuname" class="col-md-2 control-label">姓名</label>
<div class="col-md-4">
<input type="text" class="form-control" placeholder="姓名" name="stuname" ng-model="name" ng-minlength=3 ng-maxlength=20 required />
<div class="error" ng-show="createnew_form.stuname.$dirty && createnew_form.stuname.$invalid">
<small class="error" ng-show="createnew_form.stuname.$error.required">
请输入姓名
</small>
<small class="error" ng-show="createnew_form.stuname.$error.minlength">
至少输入两个字
</small>
<small class="error" ng-show="createnew_form.stuname.$error.maxlength">
最多输入五个字
</small>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">年龄</label>
<div class="col-md-4">
<input type="number" min="0" max="100" required class="form-control" name="age"
ng-model="age" />
<div class="error-container" ng-show="createnew_form.age.$dirty && createnew_form.age.$invalid">
<small class="error" ng-show="createnew_form.age.$error.required">
请输入年龄
</small>
<small class="error" ng-show="createnew_form.age.$error.min">
最小年龄为0
</small>
<small class="error" ng-show="createnew_form.age.$error.max">
最大年龄为100
</small>
</div>
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="确认添加" class="btn btn-primary" />
</div>
</div>
</form>
</div>
Shouldn't creatnew_form.course.$invalid be createnew_form.course.$invalid (with an 'e' in "createnew")?