Flask WTForms的自定义属性

Question

我在Flask和AngularJS上开发网站。我需要使用AngularJS发送一个带AJAX的表单，但它需要输入字段的自定义属性。例如，我在Jinja2模板中有一个表单：

<form method="post" action="/">
    {{ form.hidden_tag() }}
    {{ form.name(placeholder="Name") }}
</form>

那么如何从AngularJS添加一个属性，让我的“名字”字段说“ng-model”？

感谢您的帮助！

Answer 1

Python标识符中不允许使用破折号，并且只有Python标识符可用作呼叫中的keyword_argument=value对。

但是你有几种方法可以解决这个问题;您可以在ng-映射中传递**kwargs前缀选项，将Meta类用于表单翻译_至- {{1} }}属性，或使用自定义小部件进行相同的翻译。

传入** kwargs映射

使用ng_，您可以传入非Python标识符的参数，只要它们是字符串即可。用它来渲染表单域：

**kwargs

您可以在字段定义的{{ form.name(placeholder="Name", **{'ng-model': 'NameModel') }} 映射中添加相同的信息：

render_kw

每次渲染时都会使用它; class MyForm(Form): name = StringField(u'Full Name', render_kw={'ng-model': 'NameModel'}) 被添加到渲染时传入的参数中，所以：

render_kw

会同时呈现{{ form.name(placeholder="Name") }} 和placeholder属性。

子类Meta并在表单中使用

从WTForm 2.0开始，实际上要求Meta class you attach to your form使用Meta.render_field() hook呈现字段：

ng-model

直接在表单上使用它：

import wtform.meta

class AngularJSMeta:
    def render_field(self, field, render_kw):
        ng_keys = [key for key in render_kw if key.startswith('ng_')]
        for key in ng_keys:
            render_kw['ng-' + key[3:]] = render_kw.pop(key)
        # WTForm dynamically constructs a Meta class from all Meta's on the
        # form MRO, so we can use super() here:
        return super(AngularJSMeta, self).render_field(field, render_kw)

或继承class MyForm(Form): Meta = AngularJSMeta name = StringField(u'Full Name') 类：

Form

并将其用作所有表单的基础：

class BaseAngularJSForm(Form):
    Meta = AngularJSMeta

现在你可以使用这个模板：

class MyForm(BaseAngularJSForm):
    name = StringField(u'Full Name')

子类窗口小部件

您可以使用以下选项对您选择的小部件进行子类化：

{{ form.name(placeholder="Name", ng_model='NameModel') }}

这会将以class AngularJSMixin(object): def __call__(self, field, **kwargs): for key in list(kwargs): if key.startswith('ng_'): kwargs['ng-' + key[3:]] = kwargs.pop(key) return super(AngularJSMixin, self).__call__(field, **kwargs) class AngularJSTextInput(AngularJSMixin, TextInput): pass 开头的任何关键字参数转换为以ng_开头的关键字参数，从而确保可以添加正确的HTML属性。 ng-可以与任何窗口小部件类一起使用。

在您的字段中将其用作AngularJSMixin属性：

widget

再次在渲染模板时可以使用class MyForm(Form): name = StringField(u'Full Name', widget=AngularJSTextInput()) ：

ng_model

在所有情况下，属性都将在呈现的HTML中添加为{{ form.name(placeholder="Name", ng_model='NameModel') }} ：

placeholder="Name" ng-model="NameModel"

Answer 2

{{ form.username(placeholder='your name', size=20, **{'ng-model':'hello', 'class':'hello'}) }}

我认为更好