Currently, I am incorporating Angular on the client side to interact with a Django REST Framework backend.
To expedite the launch of the project's Alpha version, we opted to utilize server-side validation directly.
With Django REST, a JSON string is returned displaying errors corresponding to each field in a one-to-one fashion.
This functionality in Django allowed me to implement a similar feature in jQuery within minutes.
Now, the question arises – how can I achieve the same in Angular?
Example code:
form:
<label for="uname">Login:</label>
<div class="inputUnit" name="email">
<input tpye="email" class="text" name="email" ng-model="formData.email">
</div>
<label for="password">password:</label>
<div class="inputUnit">
<input type="password" class="text" name="password" ng-model="formData.password">
</div>
JSON response from the server if both fields are left empty:
{"password": ["This field is required."], "email": ["This field is required."]}
JSON response from the server when password is missing and email does not match regex:
{"password": ["This field is required."], "email": ["Enter a valid e-mail address."]}
What is the recommended approach to create a generic component that displays these errors to the user?
The desired HTML structure after showing the errors:
<label for="uname">Login:</label>
<div class="inputUnit" name="email">
<input tpye="email" class="text" name="email" ng-model="formData.email">
<label for="error">Email error here</lable>
</div>
<label for="password">password:</label>
<div class="inputUnit">
<input type="password" class="text" name="password" ng-model="formData.password">
<label for="error">Password error here</lable>
</div>