Django REST framework + angular, autmatically appending backed errors to the DOM

Question

I am working on a new project, which includes several standard forms(Login, Registration, etc).

I have a basic client side validation with ng-required, type, and etc.

The problem is that I might get other kinds of errors from the Django REST backend, such as length, unique constraint and others, and those rules might change quite frequently.

The django REST server returns the errors in a JSON string, in shich the key is the field, and the value is the description of the error.

Is there anyway to write something in angular that will automatically append an error next to the invalid element, as a modular unit, that can be reused, so I won't have to add an error container and ng-bind for it per each field in my form?.

Thanks for any assistance.

Answer 1

When you want to write reusable code like this, your best choice is to use directives. You can create a directive named <email></email> and then inside the template, populate it with the input element and display the {{error}} next to it. There are several ways of getting the error into the directive template, but I'd suggest isolate scope and pass the data into the directive. This helps make directives more reusable.

If you've done things correctly then your backend 'Django REST' shouldn't have anything to do with this front-end functionality for the directive. All you need to do is change the data inside the controller and it will automatically change the data in the directive. So it gives a good level of abstraction as well.