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

Question

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

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

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

祝你好运!