Forms in AngularJS

<form name="myform" class="css-form" novalidate>
disable browser's native
form validation
Name: <input type="text" ng-model="user.name"/>
E-mail:<input type="email" ng-model="user.email" required/>
Gender:
<input type="radio" ng-model="user.gender" value="male"/> male
<input type="radio" ng-model="user.gender" value="female"/> female
</form>
<button ng-click="reset()"
ng-disabled="isUnchanged(user)">
RESET
</button>
<button ng-click="update(user)"
ng-disabled=“myform.$invalid || isUnchanged(user)">
SAVE
</button>
validation
<style type="text/css">
.css-form input.ng-invalid.ng-dirty {background-color: #FA787E;}
.css-form input.ng-valid.ng-dirty {background-color: #78FA89;}
</style>
Binding the input
element to scope
property

Please type your name : {{name}}

Name: <input ng-model="name" value="..." />
Template
name :
Scope
value
elm.bind('keydown', … )
$scope.$watch('name', … )
Directive

Form
 Name
 Email
 Age
 Submit function
 Reset function
Scope
Binding
Proxies
Server

Data Binding

 ng-model-options="{
updateOn: 'default blur',
debounce: {'default': 500, 'blur': 0}
}"

Types
 Text
 Checkbox
 File
 Password
 Email
 URL
 Number
 Range
 Date
Validations
 novalidate
 Required
 Pattern
 Minlength
 Maxlength
 Min
 Max
Status
 $error
 $pristine
 $dirty
 $valid
 $invalid
 $touched
 $untouched
 $pending
CSS
 ng-valid
 ng-invalid
 ng-pristine
 ng-dirty
 ng-touched
 ng-untouched
 ng-pending
Events
 ng-click
 ng-change
 ng-submit

<input type="checkbox"
ng-model="{string}"
[name="{string}"]
[ng-true-value="{string}"]
[ng-false-value="{string}"]
[ng-change="{string}"]>
<input type="email"
ng-model="{string}"
[name="{string}"]
[required]
[ng-required="{string}"]
[ng-minlength="{number}"]
[ng-maxlength="{number}"]
[ng-pattern="{string}"]>
<input type="number"
ng-model="{string}"
[name="{string}"]
[min="{string}"]
[max="{string}"]
[required]
[ng-pattern="{string}"]
[ng-change="{string}"]> <input type="radio"
ng-model="{string}"
value="{string}"
[name="{string}"]
<input type="text" | type="URL"
ng-model="{string}"
[name="{string}"]
[required]
[ng-pattern="{string}"]

Form
 $error
 $pristine
 $dirty
 $pending
NgModelController
<button
ng-click="update(user)"
ng-disabled="form.$invalid || isUnchanged(user)">
SAVE
</button>
<span
ng-show="f.uEmail.$dirty && f.uEmail.$invalid">
Invalid:
<span ng-show="form.uEmail.$error.email">
This is not a valid email.</span>
</span>
NgModelController
ng-model
 $valid
 $invalid
 $submitted
 $error
 $pristine
 $dirty
 $pending
 $valid
 $invalid

Form Validations

$async
Validators
$parsers
$modelValue
ngModelController
$validators
$async
Validators
$validators
$format
ters
$view
Change
Listeners$render
Status
 $error
 $pristine
 $dirty
 $valid
 $invalid
 $touched
 $untouched
 $pending
$viewValue
$$lastCommittedViewValue
$commitViewValue
$rollbackViewValue
$$debounce
ViewValue
Commit
$setView
Value

ngModelController
($pristine, $dirty, $error, $valid, $invalid )
$setValidity()$setPristine()
<style type="text/css">
input.ng-invalid.ng-dirty {background-color: #FA787E;}
input.ng-valid.ng-dirty {background-color: #78FA89;}
</style>

app.directive('contenteditable', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
// view -> model
elm.bind('blur', function() {
scope.$apply(function() {
ctrl.$setViewValue(elm.html());
});
});
// model -> view
ctrl.$render = function() {
elm.html(ctrl.$modelValue);
};
// load init value from DOM
ctrl.$setViewValue(elm.html());
}
};
});
<div ng-model="content" title="Click to edit" contentEditable="true" >Some</div>
<pre>model = {{content}}</pre>

Custom Binding

app.directive('smartFloat', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift( function (viewValue) {
if ( FLOAT_REGEXP.test(viewValue) ) {
// it is valid
ctrl.$setValidity('float', true);
return parseFloat(viewValue.replace(',', '.'));
} else {
// it is invalid, return undefined (no model update)
ctrl.$setValidity('float', false);
return undefined;
}
});
}
};
});
<div>
Length (float):
<input type="text" ng-model="length" name="length" smart-float />{{length}}<br />
<span ng-show="form.length.$error.float">This is not a valid float number!</span>
</div>

mi.directive('validatePasswordCharacters', function () {
var REQUIRED_PATTERNS = [/d+/,/[a-z]+/,/[A-Z]+/,/W+/,/^S+$/];
return {
require: 'ngModel',
link: function ($scope, element, attrs, ngModel) {
ngModel.$validators.passwordCharacters = function (value) {
var status = true;
angular.forEach(REQUIRED_PATTERNS, function (pattern) {
status = status && pattern.test(value);
});
return status;
};
}
}
});

mi.directive('validatePasswordCharacters', function () {
var REQUIRED_PATTERNS = [/d+/,/[a-z]+/,/[A-Z]+/,/W+/,/^S+$/];
return {
require: 'ngModel',
link: function ($scope, element, attrs, ngModel) {
ngModel.$validators.passwordCharacters = function (value) {
var status = true;
angular.forEach(REQUIRED_PATTERNS, function (pattern) {
status = status && pattern.test(value);
});
return status;
};
}
}
});
<form name="myForm">
<div class="label">
<input name="myPassword" type="password" ng-model="data.password"
validate-password-characters required />
<div ng-if="myForm.myPassword.$error.required">
You did not enter a password
</div>
<div ng-if="myForm.myPassword.$error.passwordCharacters">
Your password must contain a numeric, uppercase and lowercase as
well as special characters
</div>
</div>
</form>

ngModule.directive('usernameAvailableValidator', function($http) {
return {
require: 'ngModel',
link: function($scope, element, attrs, ngModel) {
ngModel.$asyncValidators.usernameAvailable = function(username) {
return $http.get('/api/username-exists?u=' + username);
};
}
}
});

ngModule.directive('usernameAvailableValidator', function($http) {
return {
require: 'ngModel',
link: function($scope, element, attrs, ngModel) {
ngModel.$asyncValidators.usernameAvailable = function(username) {
return $http.get('/api/username-exists?u=' + username);
};
}
}
});

<input type="text"
class="input"
name="username"
minlength="4"
maxlength="15"
ng-model="form.data.username"
pattern="^[-w]+$"
username-available-validator
placeholder="Choose a username for yourself"
required />
<div ng-if="myForm.myUsername.$pending">
Checking Username...
</div>
</form>

Custom Form Validations

eyalvardi.wordpress.com

Forms in AngularJS

In this document