wtform의 필드에 CSS 클래스 추가

Question

wtform (및 플라스크)을 사용하여 동적 양식을 생성 중입니다. 내가 생성하는 필드에 사용자 정의 CSS 클래스를 추가하고 싶습니다. 그러나 지금까지는 그렇게 할 수 없었습니다. 대답을 사용하여 here을 발견했습니다.이 기능을 추가하기 위해 사용자 정의 위젯을 사용하려고했습니다. 보기에서

class ClassedWidgetMixin(object): 
    """Adds the field's name as a class. 

    (when subclassed with any WTForms Field type). 
    """ 

    def __init__(self, *args, **kwargs): 
    print 'got to classed widget' 
    super(ClassedWidgetMixin, self).__init__(*args, **kwargs) 

    def __call__(self, field, **kwargs): 
    print 'got to call' 
    c = kwargs.pop('class', '') or kwargs.pop('class_', '') 
    # kwargs['class'] = u'%s %s' % (field.name, c) 
    kwargs['class'] = u'%s %s' % ('testclass', c) 
    return super(ClassedWidgetMixin, self).__call__(field, **kwargs) 


class ClassedTextField(TextField, ClassedWidgetMixin): 
    print 'got to classed text field' 

, 나는이 ClassedTextField이 형태에서 수입 (필드 생성 할, 그리고 f는 기본 폼의 인스턴스이다 : 그것은 그 질문에 대한 대답과 거의 동일한 방식으로 구현된다)

f.test_field = forms.ClassedTextField('Test Name') 

형태의 나머지가 올바르게 작성되어 있지만 신사 :

012 :

{{f.test_field}} 

이 출력 (NO 클래스) 생성

<input id="test_field" name="test_field" type="text" value=""> 

팁을 주시면 감사하겠습니다.

Answer 1

실제로 필드 렌더링에 HTML 클래스 속성을 첨부하기 위해 위젯 레벨로 이동할 필요는 없습니다. jinja 템플릿의 class_ 매개 변수를 사용하여 지정할 수 있습니다.

{{ form.email(class_="form-control") }} 

는 다음과 같은 HTML ::

<input class="form-control" id="email" name="email" type="text" value=""> 

는 HTML 클래스 속성의 값과 양식의 이름을 사용하여, 말, 동적으로이 작업을 수행하는 발생합니다, 다음을 수행 할 수 있습니다 :

진자 :

{{ form.email(class_="form-style-"+form.email.name) }} 

출력 :

<input class="form-style-email" id="email" name="email" type="text" value=""> 

HTML 특성 주입에 대한 자세한 내용은 official documentation을 확인하십시오.