javascript - Angular.js 中的 Django 表单集等效项

Question

Django 有 formsets ，其中多种形式可以在一个大形式中使用。假设我们可以添加一个例如图书馆使用同一书籍形式的重复形式设置多本书(提供作者和标题)。

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

Answer 1

您可以通过两个步骤实现此目的:

在前端

创建 <form>在您的页面上，它将根据您的需要构建用户输入的数据。里面<form>元素，您需要使用 ngForm使多个表单的验证能够正确运行( here 很好地解释了 ngForm 的工作原理)。假设的代码片段如下所示:

<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>

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

在后端

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

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 在后端实现你想要的库，但我没有尝试过，所以不能说它有什么不好或好的。

祝你好运!