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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
|
'use strict';
/**
* @ngdoc object
* @name angular.module.ng.$compileProvider.directive.form.FormController
*
* @property {boolean} pristine True if user has not interacted with the form yet.
* @property {boolean} dirty True if user has already interacted with the form.
* @property {boolean} valid True if all of the containg widgets are valid.
* @property {boolean} invalid True if at least one containing widget is invalid.
*
* @property {Object} error Is an object hash, containing references to all invalid widgets, where
*
* - keys are error ids (such as `REQUIRED`, `URL` or `EMAIL`),
* - values are arrays of widgets that are invalid with given error.
*
* @description
* `FormController` keeps track of all its widgets as well as state of them form, such as being valid/invalid or dirty/pristine.
*
* Each {@link angular.module.ng.$compileProvider.directive.form form} directive creates an instance
* of `FormController`.
*
*/
FormController.$inject = ['$scope', 'name'];
function FormController($scope, name) {
var form = this,
errors = form.error = {};
// publish the form into scope
name(this);
$scope.$on('$destroy', function(event, widget) {
if (!widget) return;
if (widget.widgetId && form[widget.widgetId] === widget) {
delete form[widget.widgetId];
}
forEach(errors, removeWidget, widget);
});
$scope.$on('$valid', function(event, error, widget) {
removeWidget(errors[error], error, widget);
if (equals(errors, {})) {
form.valid = true;
form.invalid = false;
}
});
$scope.$on('$invalid', function(event, error, widget) {
addWidget(error, widget);
form.valid = false;
form.invalid = true;
});
$scope.$on('$viewTouch', function() {
form.dirty = true;
form.pristine = false;
});
$scope.$on('$newFormControl', function(event, widget) {
if (widget.widgetId && !form.hasOwnProperty(widget.widgetId)) {
form[widget.widgetId] = widget;
}
});
// init state
form.dirty = false;
form.pristine = true;
form.valid = true;
form.invalid = false;
function removeWidget(queue, errorKey, widget) {
if (queue) {
widget = widget || this; // so that we can be used in forEach;
for (var i = 0, length = queue.length; i < length; i++) {
if (queue[i] === widget) {
queue.splice(i, 1);
if (!queue.length) {
delete errors[errorKey];
}
}
}
}
}
function addWidget(errorKey, widget) {
var queue = errors[errorKey];
if (queue) {
for (var i = 0, length = queue.length; i < length; i++) {
if (queue[i] === widget) {
return;
}
}
} else {
errors[errorKey] = queue = [];
}
queue.push(widget);
}
}
/**
* @ngdoc directive
* @name angular.module.ng.$compileProvider.directive.form
*
* @scope
* @description
* Directive that instantiates
* {@link angular.module.ng.$compileProvider.directive.form.FormController FormController}.
*
* If `name` attribute is specified, the controller is published to the scope as well.
*
* # Alias: `ng-form`
*
* In angular forms can be nested. This means that the outer form is valid when all of the child
* forms are valid as well. However browsers do not allow nesting of `<form>` elements, for this
* reason angular provides `<ng-form>` alias which behaves identical to `<form>` but allows
* element nesting.
*
*
* # CSS classes
* - `ng-valid` Is set if the form is valid.
* - `ng-invalid` Is set if the form is invalid.
* - `ng-pristine` Is set if the form is pristine.
* - `ng-dirty` Is set if the form is dirty.
*
*
* # Submitting a form and preventing default action
*
* Since the role of forms in client-side Angular applications is different than in classical
* roundtrip apps, it is desirable for the browser not to translate the form submission into a full
* page reload that sends the data to the server. Instead some javascript logic should be triggered
* to handle the form submission in application specific way.
*
* For this reason, Angular prevents the default action (form submission to the server) unless the
* `<form>` element has an `action` attribute specified.
*
* You can use one of the following two ways to specify what javascript method should be called when
* a form is submitted:
*
* - ng-submit on the form element (add link to ng-submit)
* - ng-click on the first button or input field of type submit (input[type=submit])
*
* To prevent double execution of the handler, use only one of ng-submit or ng-click. This is
* because of the following form submission rules coming from the html spec:
*
* - If a form has only one input field then hitting enter in this field triggers form submit
* (`ng-submit`)
* - if a form has has 2+ input fields and no buttons or input[type=submit] then hitting enter
* doesn't trigger submit
* - if a form has one or more input fields and one or more buttons or input[type=submit] then
* hitting enter in any of the input fields will trigger the click handler on the *first* button or
* input[type=submit] (`ng-click`) *and* a submit handler on the enclosing form (`ng-submit`)
*
* @param {string=} name Name of the form. If specified, the form controller will be published into
* related scope, under this name.
*
* @example
<doc:example>
<doc:source>
<script>
function Ctrl($scope) {
$scope.text = 'guest';
}
</script>
<form name="myForm" ng-controller="Ctrl">
text: <input type="text" name="input" ng-model="text" required>
<span class="error" ng-show="myForm.input.error.REQUIRED">Required!</span>
<tt>text = {{text}}</tt><br/>
<tt>myForm.input.valid = {{myForm.input.valid}}</tt><br/>
<tt>myForm.input.error = {{myForm.input.error}}</tt><br/>
<tt>myForm.valid = {{myForm.valid}}</tt><br/>
<tt>myForm.error.REQUIRED = {{!!myForm.error.REQUIRED}}</tt><br/>
</form>
</doc:source>
<doc:scenario>
it('should initialize to model', function() {
expect(binding('text')).toEqual('guest');
expect(binding('myForm.input.valid')).toEqual('true');
});
it('should be invalid if empty', function() {
input('text').enter('');
expect(binding('text')).toEqual('');
expect(binding('myForm.input.valid')).toEqual('false');
});
</doc:scenario>
</doc:example>
*/
var formDirective = [function() {
return {
name: 'form',
restrict: 'E',
scope: true,
inject: {
name: 'accessor'
},
controller: FormController,
compile: function() {
return {
pre: function(scope, formElement, attr, controller) {
formElement.data('$form', controller);
formElement.bind('submit', function(event) {
if (!attr.action) event.preventDefault();
});
forEach(['valid', 'invalid', 'dirty', 'pristine'], function(name) {
scope.$watch(function() {
return controller[name];
}, function(value) {
formElement[value ? 'addClass' : 'removeClass']('ng-' + name);
});
});
}
};
}
};
}];
|
