Form doesn't become valid when Django fails with a Validation error on some "custom" field

[juanmitaboada]

When Django returns a validation error on some field, the rendered website doesn't set valid the form once the invalid field is filled with valid information.

Example:

I fill a DateField with a string and Djangular (by default) will not do any validation on the angular side, so I send the form and the result from Django is visible saying that I should fill the field with a valid date, then if I remove everything from the field or I fill it with a valid date, the form stays invalid anyway.

Some idea where the problem could be located?

Thank you,

PS: I know I can set specific validation for this DateField, but the validation some times can be related to the server side and in this cases the validation must happens on the server (not on the client), so I am looking forward to find a solution for the problem...not a work arround for the example I am giving with the DateField.

[jrief]

Can this be reproduced using the example code? There is a date input field which can be used for testing. Note that Angular AFAIK does not offer date validation out of the box, you must therefore add a validator yourself.

[juanmitaboada]

I confirm this error is happening in the example code as well. To simulate the error, apply this simple patch to your forms.py example:

$ git diff server/forms.py
diff --git a/examples/server/forms.py b/examples/server/forms.py
index 5bf5094..70d5f27 100644
--- a/examples/server/forms.py
+++ b/examples/server/forms.py
@@ -36,9 +36,7 @@ class SubscriptionForm(Bootstrap3FormMixin, forms.Form):
     subscribe = forms.BooleanField(initial=False, label='Subscribe Newsletter', required=False)
     phone = forms.RegexField(r'^\+?[0-9 .-]{4,25}$', label='Phone number',
         error_messages={'invalid': 'Phone number have 4-25 digits and may start with +'})
-    birth_date = forms.DateField(label='Date of birth',
-        widget=forms.DateInput(attrs={'validate-date': '^(\d{4})-(\d{1,2})-(\d{1,2})$'}),
-        help_text='Allowed date format: yyyy-mm-dd')
+    birth_date = forms.DateField(label='Date of birth')
     continent = forms.ChoiceField(choices=CONTINENT_CHOICES, label='Living on continent',
         error_messages={'invalid_choice': 'Please select your continent'})
     weight = forms.IntegerField(min_value=42, max_value=95, label='Weight in kg',

Then:

1. Fill the form normally but on the Birthday field write some string
2. Send and the server will give you back an error on that field "Enter a valid date."
3. Write this time a valid date...but nothing happens....the form stays "invalid"

Thank you,

[jrief]

I'm not sure which of the forms you're using, but by removing the widget DateInput and the field attribute validate-date it becomes a normal textfield. So the text Enter a valid date should be embedded into a <li ng-show="$pristine"> or similar. This text disappears as soon as you type the first character.

BTW: do you have any public website using django-angular?

[gjlondon]

I just ran into a very similar issue (I'm not sure if it's the exact same one)

I had forms declared as:

class HerdInfoInputForm(NgFormValidationMixin, Bootstrap3FormMixin, NgModelForm):

and everything appeared to work fine, until I submitted a form that passed client validation but not server validation. When that happened, typing a new value in the invalid field would not make the error go away nor mark the field as valid.

I figured out that that I could fix it by declaring my forms as:

class HerdInfoInputForm(NgModelFormMixin, NgFormValidationMixin, Bootstrap3FormMixin, NgModelForm):

...instead. I must not have read the documentation closely enough but I assumed that NgModelFormMixin was intended to provide the same functionality as NgModelForm to classes that couldn't inherit directly from NgModelForm. Perhaps it would to someone more prominently point out that one sometimes needs both NgModelFormMixin and NgModelForm on the same class.

[jrief]

Ok. If so many users ran into that problem, I'll add a note to the documentation. The intention of this strict separation is to add ng-model attributes to Django Forms (using NgModelFormMixin) allowing to send that data back to the server via $http.post(...) and send back validated or erroneous Form data from the server to the client (using NgFormValidationMixin).

I hoped the the examples in the demo explained this in detail.