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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Forms in AngularJS

Similar to Forms in AngularJS (20)

More from Eyal Vardi

More from Eyal Vardi (20)

Recently uploaded

Recently uploaded (20)

Forms in AngularJS

Editor's Notes