WTForms将其他类别添加到SelectField

Question

我以前已经在互联网上看到过这样的表单-基本上，我想允许用户将字段动态添加到WTForms中的SelectField下拉表单中。 例如，下拉菜单中的第一个字段可能是允许用户向表单添加自定义字段的链接。 我将如何在WTForms中实现这样的事情？ 谢谢！

Answer 1

嗨，迈克尔，我知道这已经晚了三个月了，但是最近我在AngularJS和bootstrap modals的帮助下做了一些类似的事情，所以我想为完整起见，我会提出来：

这是一个非常简化的版本，我当然没有针对您的生产环境进行任何类型的错误检查或验证。

在我的模板中，选择字段如下所示。 我没有在第一个选项上使人能够创建某些东西，而是在选择字段旁边添加了一个链接，该链接允许一个人添加新类别。 链接本身会打开一个模态形式的表单。

以下是选择字段：

<div class="form-group">
        {{ form.maincategory.label(class="col-sm-2 control-label") }}
        <div class="col-sm-5">
        {{ form.maincategory(**{'ng-model':'maincategory',
                                'ng-options':'c.id as c.displayname for c in allmaincategories',
                                'class':'form-control'}) }} 
        #over here is the link that opens the form in a modal window
        </div><a data-toggle="modal" href="#newcategory">Add a new category</a>
    </div>

当用户单击链接添加新类别时，将加载以下模式窗口：

<!-- Add new category Modal -->
<div class="modal fade" id="newcategory" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Create new main category</h4>
      </div>
      <div class="modal-body">
        <form method="post" ng-submit="createCategory()">
            <div class="form-group">
                {{ categoryform.displayname.label(class="col-sm-8 control-label") }}
                <div>
                    {{ categoryform.displayname(**{'ng-model':'maincat.displayname','class':'form-control'}) }}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input type="submit" class="btn btn-primary" value="Save changes" />
            </div>
        </form>
      </div>
    </div>
  </div>
</div>

在模式窗口中呈现上述表单的WTFORM表单类如下：

class DirectoryMainCategoryForm(Form):
    displayname = TextField('Category name as it appears', validators=[DataRequired(message=(u'This category name is how it appears in the menu'))])

#the following is the form main form where the select appears
class MainEntry(Form):
    maincategory = QuerySelectField('Main category', validators = DataRequired(message=(u'Please select a category for this place'))], get_label='category',
    allow_blank=False, query_factory=Maincategory.query.all,blank_text =('-- Select a main category --'))


#And of course the javascript magic that glues it all together:
function DirectoryController($scope, $http){
    #Adds a new category to the select menu
    $scope.createCategory = function() {
        var categorydata = angular.toJson($scope.maincat);
        $http.post('/create/new/category', categorydata).success(function(data) {
            $scope.allmaincategories = data.category;
        });
    }
}