WTForms 向 SelectField 添加其他类别

Question

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

Answer 1

嗨，迈克尔，我知道这已经晚了 3 个月，但我最近在 AngularJS 和引导模式的帮助下做了类似的事情，所以为了完整起见，我想我会提出这个：

这是一个非常简化的版本，我没有包含您当然希望为您的生产环境执行的任何类型的错误检查或验证。

在我的模板中，选择字段如下所示。我只是在选择字段旁边添加了一个链接，该链接允许人们添加新类别，而不是第一个选项是使人们能够创建内容的选项。链接本身会以模式打开一个表单。

以下是选择字段：

<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;
        });
    }
}