如何使用 Angular 收集多个表单提交并一次提交给猫鼬模型？

Posted 2023-03-10

【中文标题】如何使用 Angular 收集多个表单提交并一次提交给猫鼬模型？

【英文标题】：How to use angular to collect many form submits and submit at once to mongoose model?

【发布时间】：2017-05-10 04:16:08

【问题描述】：

我正在尝试保存包含多个问题的调查。一项调查有很多问题。同样，必须有许多调查。每次我输入一个问题和答案并单击 saveQuestion 按钮。我正在使用 Angular 并希望将其保存在一个数组中（在前端）。在我保存调查的所有问题并单击 saveSurvey 按钮后，我想将调查保存到猫鼬模式。

我可以为一个表单使用两个提交按钮吗？如果不是，解决方案是什么？ 我在上一个问题中问过这个问题。

How to save array of inputs to a child schema in a nested mongoose schema?

但我不知道如何在前端收集表单提交并立即发送到发布路线。

我搜索了很多，可能与“ng-repeat”有关。

我的表单

<form class="form-horizontal" action="/CreateSurvey" method="post">
<div class="form-group">
    <div>
        <div class="col-sm-9">
            <input type="text" name="que" placeholder="Click to enter question" style="width: 100%;">
        </div>
    </div>

    <div>
        <div class="col-sm-9">
            <input type="text" name="ans1" placeholder="Click to enter answer" style="width: 100%;">
        </div>
    </div>

    <div>
        <div class="col-sm-9">
            <input type="text" name="ans2" placeholder="Click to enter answer" style="width: 100%;">
        </div>
    </div>

    <div>
        <div class="col-sm-9">
            <input type="text" name="ans3" placeholder="Click to enter answer" style="width: 100%;">
        </div>
    </div>

    <div>
        <div class="col-sm-offset-3 col-sm-9">
            <button type="submit" class="btn btn-default">Save Question</button>
        </div>
    </div>

    <div>
        <div class="col-sm-offset-3 col-sm-9">
            <button type="submit" class="btn btn-default">Save Survey</button>
        </div>
    </div>
</div>  

猫鼬模型

 var mongoose = require("mongoose");
 var Schema = mongoose.Schema;

 var SurveySchema = new Schema(
    surveyname: String,

    question  : [
        que: String,
        ans1: String,
        ans2: String,
        ans3: String,
        ans4: String

        ]
    );

 module.exports=mongoose.model('Survey',SurveySchema);

我如何发布到 mongoose 架构

 var express = require('express');   
 var router = express.Router();
 var Survey = require('../models/QBank');

 router.post('/', function(req, res, next)

 new Survey(
 surveyname: req.body.surveyname,
 question  : [
  que: req.body.que,
  ans1:req.body.ans1,
  ans2: req.body.ans2,
  ans3: req.body.ans3,
  ans4:req.body.ans4

  ]

).save(function(err, doc)
  if(err) res.json(err);
  else
  req.flash('success_msg', 'User registered to Database');  
  res.redirect("/CreateSurvey");

);
);

module.exports = router;

【问题讨论】：

您也可以将Save Survey 替换为单选按钮！

【参考方案1】：

您是否有多种形式？如果您有一个表单，则可以使用输入类型按钮而不是类型提交来在前端保存问题。您可以使用 ng-click 输入类型按钮并将其保存到该控制器中的数组中。 如果您的问题是动态的，您可以在模型中使用 [Mixed] 类型..

但在我看来，您可以使用 jquery ajax 发送数据，而无需使用表单元素

【讨论】：

我希望用户输入并创建问题和答案。这就是我使用表格的原因。我可以用 jquery ajax 做到这一点吗？我在哪里可以找到相关信息？例如：教程

如果你使用 Angular，你可以使用 $http 而不是 jquery ajax 来向你发送数据。在 Angular 中搜索 $http .. 就这样

是的。谢谢你。罗伊的上述回答解释了这一点。

【参考方案2】：

您可以将多个问题推送到一个数组中，最后将多个问题提交给api。

在同一个表单中添加一个按钮来推送数组中的问题和另一个按钮来提交调查信息到 api。

html：

<form class="form-horizontal" ng-submit="addSurvay()">
    <div class="form-group">
      <label for="s" class="col-sm-2 control-label">S Name</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="s" ng-model="surveyname" placeholder="Survay name">
      </div>
    </div>
    <div class="form-group">
      <label for="q" class="col-sm-2 control-label">Question</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="q" ng-model="questionObj.que" placeholder="Question">
      </div>
    </div>
    <div class="form-group">
      <label for="a1" class="col-sm-2 control-label">Answer 1</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="a1" ng-model="questionObj.ans1" placeholder="Answer 1">
      </div>
    </div>
    // ans 2,3,4 div 
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="button" class="btn btn-default" ng-click="addQuestion()">Add question</button>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Add survey</button>
      </div>
    </div>

  </form>

控制器代码：

$scope.addQuestion = function() 
    $scope.question.push($scope.questionObj);
    $scope.questionObj =;
  ;

  $scope.addSurvey = function() 
    $scope.data =surveyname:$scope.surveyname, question: $scope.question;
    $http.post('/path', $scope.data);
  ;

更多详情见PLUNKER和another question answer中的服务器部分