[ AngularJS ] form directive

<script>
 angular.module('formExample', [])
 .controller('FormController', ['$scope', function($scope) {
 $scope.userType = 'guest';
 }]);
</script>
<style>
.my-form {
transition:all linear 0.5s;
background: transparent;
}
.my-form.ng-invalid {
background: red;
}
</style>
<form name="myForm" ng-controller="FormController" class="my-form">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span>

<code>userType = {{userType}}</code>

<code>myForm.input.$valid = {{myForm.input.$valid}}</code>

<code>myForm.input.$error = {{myForm.input.$error}}</code>

<code>myForm.$valid = {{myForm.$valid}}</code>

<code>myForm.$error.required = {{!!myForm.$error.required}}</code>

</form>

Since the form name is “myForm”, we can access using

{{ myForm[“userType”].$invalid }} or {{ userType }}

$invalid : True if at least one containing control or form is invalid

$dirty : True if user has already interacted with the form

$pristine : True if user has not interacted with the form yet

DIY : https://docs.angularjs.org/api/ng/directive/form,

https://docs.angularjs.org/api/ng/type/form.FormController

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s