在Angular中使用模態進行表單驗證

我在模態彈出窗口中有一個表單。我試圖在用戶嘗試提交表單後在輸入上運行表單驗證。到目前爲止，我正在努力工作。在Angular中使用模態進行表單驗證

在我看來，我有以下的（對不起，如果有任何語法錯誤，我是玉上飛轉換此）：

<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-對話框彈出，我有這樣的：

  $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]而不是空的文本輸入框。

來源

2015-08-30 Kyle Giard-Chase

你可以請你提供一個運動員嗎？ –

你有一個單獨的控制器爲你的模態？ – bobleujr

清理模型的一種方法可以使用屬於父控制器的模型var，並在回調中進行清理。查看模板如何附加父控制器的變量FormData。

檢查this出

所以你的驗證，我會建議你的是有自己的控制器在裏面，不管它多大碼的都有。它可以幫助您保持模塊化的概念並更好地控制範圍。這種方式在驗證時也會方便很多。

來源

2015-08-30 22:51:40 bobleujr

這個答案提供了很好的建議，如果你不這樣做（我犯了這個錯誤），可能會導致清理範圍變量的各種問題。如果爲表單+1創建單獨的控制器，則會更清潔 – drjimmie1976

在Angular中使用模態進行表單驗證

回答

相關問題