<!DOCTYPE html>
<html>
<script
src
=
""
></script>
<body
ng-app=
""
>
<p>
Try writing in the input field:
</p>
<form
name
=
"myForm"
>
MyInput:
<input
name
=
"myInput"
ng-model=
"myInput"
required
><br>
Email:
<input
type
=
"email"
name
=
"myemail"
ng-model=
"myemail"
required
>
</form>
<p>
The input's MyInput valid state is:
</p>
<h1>
{{myForm.myInput.$untouched}}
</h1>
<p>
The input's Email valid state is:
</p>
<h1>
{{myForm.myemail.$valid}}
</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<script
src
=
""
></script>
<body
ng-app=
""
>
<p>
Try leaving the first input field blank:
</p>
<form
name
=
"myForm"
>
<p>
Name:
<input
name
=
"myName"
ng-model=
"myName"
required
>
<span
ng-show=
"myForm.myName.$touched && myForm.myName.$invalid"
>
The name is required.
</span>
</p>
<p>
Address:
<input
name
=
"myAddress"
ng-model=
"myAddress"
required
>
</p>
</form>
<p>
We use the ng-show directive to only show the error message if the field has been touched
AND is empty.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<script
src
=
""
></script>
<style>
form.ng-pristine {
background-color:lightblue;
}
form.ng-dirty {
background-color:pink;
}
</style>
<body
ng-app=
""
>
<form
name
=
"myForm"
>
<p>
Try writing in the input field:
</p>
<input
name
=
"myName"
ng-model=
"myName"
required
>
<p>
The form gets a "ng-dirty" class when the form has been modified, and will therefore turn
pink.
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<script
src
=
""
></script>
<style>
input.ng-invalid {
background-color:pink;
}
input.ng-valid {
background-color:lightgreen;
}
</style>
<body
ng-app=
""
>
<p>
Try writing in the input field:
</p>
<form
name
=
"myForm"
>
<input
name
=
"myName"
ng-model=
"myName"
required
>
</form>
<p>
The input field requires content, and will therefore become green when you write in it.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<script
src
=
""
></script>
<body>
<h2>
Validation Example
</h2>
<form
ng-app=
"myApp"
ng-controller=
"validateCtrl"
name
=
"myForm"
novalidate
>
<p>
Username:
<br>
<input
type
=
"text"
name
=
"user"
ng-model=
"user"
required
>
<span
style
=
"color:red"
ng-show=
"myForm.user.$dirty && myForm.user.$invalid"
>
<span
ng-show=
"myForm.user.$error.required"
>
Username is required.
</span>
</span>
</p>
<p>
Email:
<br>
<input
type
=
"email"
name
=
"email"
ng-model=
"email"
required
>
<span
style
=
"color:red"
ng-show=
"myForm.email.$dirty && myForm.email.$invalid"
>
<span
ng-show=
"myForm.email.$error.required"
>
Email is required.
</span>
<span
ng-show=
"myForm.email.$error.email"
>
Invalid email address.
</span>
</span>
</p>
<p>
<input
type
=
"submit"
ng-disabled=
"myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty &&
myForm.email.$invalid"
>
</p>
</form>
<script>
var
app
=
angular.module
(
'myApp'
, []);
app.controller
