angular.js 中的 Django formset 等效项

Posted 2023-02-24

【中文标题】angular.js 中的 Django formset 等效项

【英文标题】：Django formset equivalent in angular.js

【发布时间】：2016-07-13 16:29:46

【问题描述】：

Django 有formsets，可以在一个大表单中使用多个表单。因此，假设可以添加一个例如图书馆 formset 多本书（提供作者和标题）使用相同书籍形式的重复。

如何使用 Angular.js 和 Django Rest Framework 实现相同的功能？我是 Angular.js 和 Django Rest Framework 的新手，需要一些指导如何能够以一个大表单（例如我的库）为给定模型动态添加更多表单（例如一本书）并将它们保存在 Django 后端.

【问题讨论】：

为什么要混合使用 Angular 和 django？

【参考方案1】：

您可以分两步实现：

在前端

在您的页面上创建一个<form>，它将根据您的需要构建用户输入的数据。在该<form> 元素中，您需要使用ngForm 进行多个表单的验证才能正确运行（here 很好地解释了ngForm 的工作原理）。假设的代码 sn-p 如下所示：

<form name="libraryForm">
  <div ng-repeat="book in vm.newBooksToAdd">

    <!-- ngForm directive allows to create forms within the parent form -->
    <ng-form name="bookForm">
      <div>
        <label>Book title</label>
        <input ng-model="book.title" type="text" name="title" required>
      </div>
      <div>
        <label>Author</label>
        <input ng-model="book.author" type="text" name="author" required>
      </div>
    </ng-form>
  </div>
</form>

在您的控制器中，您可以将要添加的书籍列表初始化为vm.newBooksToAdd = [];，并且每当您想将新表单添加到新书籍的表单列表中时，只需vm.newBooksToAdd.push() 一个空对象即可。因此，您将向后端发送代表您要创建的书籍的对象数组。

在后端

现在您需要覆盖视图的.create() 方法以允许一次创建多个实例，因为默认情况下它需要一个对象。您的视图可能如下所示：

class LibraryViewSet(views.ModelViewSet):
    ...

    def create(self, request):
        serializer = self.get_serializer(data=request.data, many=True)  # notice the `many` keywork argument here
        serializer.is_valid(raise_exception=True)
        self.perform_create(serializer)
        return Response(serializer.data, status=status.HTTP_201_CREATED)

注意：如果您希望同时允许创建单个实例和批量创建，您需要调整您的 .create() 方法以检查request.data 的数据类型。

注意2：有一个django-rest-framework-bulk库可以在后端实现你想要的，但我没有尝试过，所以不能说它的好坏。

祝你好运！