Problem when form fieldnames contain hyphens.

[Peter Russell]

Hi,

We're starting to experiment with adding Angular to an existing Django
web-app, trying to "sprinkle in a little" form validation initially,
and hopefully doing more in future. However we seem to have hit a
problem more or less straight away.

We make use of Django's form system for templating our HTML forms, and
use it's prefix[1] system when we want to combine several logical
forms into one HTML form tag. For example if we have a registration
page, where we are creating a user record and a person record from the
same form we might get something like this:

<form>
<input name="person-firstname">
<input name="person-email">
<input name="user-username">
</form>

Unfortunately, the moment we include angular into such a page (event
without asking it to do anything), our field elements get red borders,
we get an error like "Error: Expression 'person-firstname' is not
assignable" [2]. We understand that this is something to do with the
hyphens in the field names, which are included by Django and can't be
got rid of. But we don't understand what is taking place to cause the
errors and how we can work around it.

Any help would be very much appreciated.

Thanks

Peter Russell

[1] https://docs.djangoproject.com/en/1.3/ref/forms/api/#django.forms.Form.prefix
[2] In Firefox 6 on Windows 7 The full error is actually:
Error: Expression 'ContactRef-IsBusiness' is not assignable.
xa([object Object],[object Object])@http://10.0.10.18:8002/site_media/
js/angular-0.9.18.min.js:52 fc([object Object],[object Object])@http://
10.0.10.18:8002/site_media/js/angular-0.9.18.min.js:52 ((function ()
{"use strict";d || (d = !0, a.defer(b, kb.delay));}),(function (d, e)
{"use strict";a.defer(function () {try {d();} catch (a) {b(a);}
finally {c();}}, e);}),[object Object])@http://10.0.10.18:8002/
site_media/js/angular-0.9.18.min.js:54 e([object Object],(function (f,
g, h) {"use strict";var i = this, k = b(i, h), l = c(i, h), n =
h.attr("ng:change") || "", u;k && (d.call(i, k, l, h), this.
$eval(h.attr("ng:init") || ""), h.bind(a, function (a) { function b()
{var a = l.get();if (!e || a != u) {k.set(a), u = k.get(), i.
$tryEval(n, h), f();}}

[Vojta Jina]

Hi Peter,

1/ I think you can override the default prefix, by overriding add_prefix method, see http://code.djangoproject.com/svn/django/trunk/django/forms/forms.py

    def add_prefix(self, field_name):
        """
        Returns the field name with a prefix appended, if this Form has a
        prefix set.

        Subclasses may wish to override.
        """
        return self.prefix and ('%s-%s' % (self.prefix, field_name)) or field_name

2/ we might consider allowing expressions with hyphens, as you can access them using bracket notation:

    obj.pro-perty // is not valid JS

    obj['pro-perty'] // is valid JS

V.

[Peter Russell]

Hi Vojta,

Thanks very much for the speedy response.

I hadn't noticed that we could override the prefix. Of course it
means making all of our forms inherit from a common base class, but
it's not too bad. We'll do this for the moment.

The second approach seems better in the long term, and it would be
great if it was supported!

Thanks

Peter

> --
> You received this message because you are subscribed to the Google Groups
> "angular" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/angular/-/U8v7QLoRCNkJ.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/angular?hl=en.
>