在 Angular 中使用模态进行表单验证

Question

我在模态弹出窗口中有一个表单。在用户尝试提交表单后，我正在尝试对输入运行表单验证。到目前为止，我一直在努力让事情顺利进行。

在我看来，我有以下内容（对不起，如果有任何语法错误，我正在将它从 Jade 即时转换）：

<script type="text/ng-template", id="modalVideoNew">
  <div class="ngdialog-message">
    <form class="form-horizontal" ng-submit="submitForm()" novalidate name="newVideoForm">
   ...
      <div class="form-group">
      <label> Title </label>
      <div class="col-sm-8">
        <input type="text" name="title", required='', ng-model="newVideoForm.title">
        <span class="text-danger" ng-show="validateInput('newVideoForm.title', 'required')"> This field is required</span>
     </div>
   </div>
 </div>
</script>

然后在我的控制器中，我调用 ng-dialog 弹出窗口，我有这个：

         $scope.newVideo = function() {
           ngDialog.openConfirm({
           template: 'modalVideoNew',
           className: 'ngdialog-theme-default',
           scope: $scope
         }).then(function() {
           $scope.validateInput = function(name, type) {
             var input = $scope.newVideoForm[name];
           return (input.$dirty || $scope.submitted) && input.$error[type];
        };
          var newVideo = $scope.newVideoForm;
        ...

现在，我仍然可以提交表单，但是一旦我打开它，我就会看到“此字段为必填项”错误消息。此外，输入预填充了 [object, Object] 而不是空的文本输入框。

Answer 1

清理模型的方法是使用属于父控制器的模型变量并在回调中清理它。查看模板如何附加您的父控制器的 var FormData。

签出this

关于您的验证，我建议您在其中拥有自己的控制器，无论它有多少代码。它可以帮助您保持模块化的概念并更好地控制您的范围。这种方式在验证时也会方便很多。