javascript - 如何在 django 中单击按钮时添加更多表单小部件？

Question

所以我创建了简单的模型（粘贴在下面）并将基于这些模型的表单传递给模板视图。现在我想添加按钮，允许用户添加更多的 Ingrediends 类字段，我有几个问题。仅在 django 中不使用 JS 是否有可能？如果不是最好的方法是什么？还有一个关于我处理表格方式的问题。可以吗，还是我应该将两种模型放在一种形式中？谢谢你的回答。

楷模：

class Recipe(models.Model):
    title       = models.CharField(max_length=254)
    author      = models.ForeignKey(settings.AUTH_USER_MODEL, null=True, blank=True, on_delete=models.SET_NULL)
    description = models.CharField(max_length=200)
    add_date    = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.title

class Ingrediends(models.Model):
    name    = models.CharField(max_length=254)
    recipe  = models.ForeignKey(Recipe, on_delete=models.CASCADE, related_name="ingredient")

形式：

class RecipeForm(forms.ModelForm):
    class Meta:
        model = Recipe
        fields = ('title',)

class IngrediendForm(forms.ModelForm):
    class Meta:
        model = Ingrediends
        fields = ('name', )

模板：

{% extends 'recipes/base.html' %}
{% block body_block %}
  <form class="" method="post">
    {% csrf_token %}
    {{form.as_p}}
    {{ingredient_form.as_p}}
    <input type="submit" value="Add recipe">
  </form>
{% endblock %}

如果我没有很好地解释我想要什么：

前：

标题： [_______]

成分：[________] [+]<-点击

后：

标题： [_______]

成分： [________]

成分：[________] [+]<-点击

标签： javascriptdjango