Render Form field error lists in ngMessages format¶
Note
This requires AngularJS 1.3+ and the angular-messages
module.
NgMessagesMixin¶
The NgMessagesMixin
mixin is used in conjunction with the NgFormValidationMixin
to facilitate
the rendering of form field error lists, in the correct format for the ngMessages directive.
from django import forms
from djangular.forms import NgForm, NgFormValidationMixin, NgMessagesMixin
class MyNgMessagesForm(NgMessagesMixin, NgFormValidationMixin, NgForm):
form_name = 'my_form'
email = forms.EmailField(label='Email')
Then using {{ form.email.errors }}
would output the following markup:
<ul class="djng-field-errors" ng-messages="my_form.email.$error" ng-show="my_form.$submitted || my_form.email.$dirty">
<li ng-message="required" class="invalid">This field is required.</li>
<li ng-message="email" class="invalid">Enter a valid email address.</li>
<li ng-message="rejected" class="invalid">
<span ng-bind="my_form.email.$message"></span>
</li>
</ul>
Handling Ajax form errors¶
The NgMessagesMixin
adds the djng-rejected
directive attribute to each form input
. This directive
handles the display and remvoval of server side errors, by adding a rejected
validator to the input
‘s
ngModel.$validators
pipeline.
<input id="id_email" name="email" ng-model="email" type="email" required djng-rejected>
The djngAngularMessagesForm.setErrors
method is used to parse the errors from the server response and apply
them to the relevant fields.
.factory('myFormService', function($http, djngAngularMessagesForm) {
return {
submit: function(data, form) {
return $http.post('my/form/url', data)
.success(function(response) {
if(!djngAngularMessagesForm.setErrors(form, response.errors)) {
// we have no errors
}
})
}
}
});
The markup below is a snippet of the {{ form.email.errors }}
shown earlier. It shows the specific part that deals
with the display of the rejected error message. The <span>
to bind to the value of my_form.email.$message
and display the message is necessary due to the following bug/issue_.
<li ng-message="rejected" class="invalid">
<span ng-bind="my_form.email.$message"> /* rejected error message will be displayed here */ </span>
</li>
Use with other django-angular form mixins¶
The NgMessagesMixin
must always be used in conjunction with the NgFormValidationMixin
and it should also
be inherited after all other django-angular form mixins.
Valid examples:
from django import forms
from djangular.forms import NgForm, NgFormValidationMixin, NgMessagesMixin
class MyNgMessagesForm(NgMessagesMixin, NgFormValidationMixin, NgForm):
# custom form logic
Or
from django import forms
from djangular.forms import NgForm, NgModelFormMixin, NgFormValidationMixin, NgMessagesMixin
class MyNgMessagesForm(NgMessagesMixin, NgModelFormMixin, NgFormValidationMixin, NgForm):
# custom form logic
Invalid examples:
from django import forms
from djangular.forms import NgForm, NgModelFormMixin, NgMessagesMixin
class MyNgMessagesForm(NgMessagesMixin, NgModelFormMixin, NgForm):
# custom form logic
Or
from django import forms
from djangular.forms import NgForm, NgFormValidationMixin, NgMessagesMixin
class MyNgMessagesForm(NgFormValidationMixin, NgMessagesMixin, NgForm):
# custom form logic
Note
Depending on the combination of form mixins used, up to a 30% decrease in watchers can be achieved
when using the NgMessagesMixin