learning-angular/09-0-forms.html at master · JsNuts/learning-angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
	<title>ngResource</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>

	<script>
	//controls our form
	var app = angular.module('formApp', []);
	app.controller('FormController', function(){
		this.userinput = {}
		this.submit = function(){
			alert('Hello ' + this.userinput.name + '!');
			this.userinput = {}
		}
	});
	</script>
	<style>
	/*This styles our input forms*/
	input.ng-dirty.ng-invalid{
		border:red 1px solid;
	}
	input.ng-dirty.ng-valid{
		border:green 1px solid;
	}
	</style>
</head>
<body ng-app="formApp">
<div style="margin:0 40%;">
	<!-- Set the form to 'novalidate' to prevent default browser validation -->
	<!-- user the userForm.$valid &&... in ng-submit to prevent submission until everything is complete. -->

	<form name="userForm" ng-controller="FormController as formCtrl"ng-submit="userForm.$valid && formCtrl.submit()" novalidate>

		<!-- Set both the input's as required to ensure we add them and can validate them -->
		Name: <input type="text" ng-model="formCtrl.userinput.name" required /><br />
		Email: <input type="email" ng-model="formCtrl.userinput.email" required /><br />

		<!-- Inline if-statement to display valid/invalid -->
		Your form is: {{userForm.$valid? 'valid' : 'invalid '}}
		<input type="submit" value="Submit!" />

	</form>
</div>
</body>
</html>