AngularJS Validation
AngularJS Validation - ng-required
Validation Directive: ng-required
Enter Your Name:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Validation - ng-required</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.fullName = "";
$scope.autoname=false;
$scope.checkname="";
});
</script>
<style>
.error-msg {
font-size: 90%;
font-style: italic;
color: red;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Validation Directive: ng-required</h3>
<p>Enter Your Name:</p>
<form name="form">
Full Name <br/>
<input type="text" name="username" ng-model="fullName" ng-required ="true" />
<span ng-show="form.username.$invalid" class="error-msg">
You must enter your Name. </span>
<br>
<input type="checkbox" ng-model="autoname"/> Auto Name? <br/>
<input type="text" name="myUserName" ng-model="checkname" ng-required ="!autoname" />
<span ng-show="form.myUserName.$invalid" class="error-msg">
Please Enter User Name. </form>
</div>
</body>
</html>
