提交表单状态防止

Question

如何在提交表单时避免在表单中提交状态（以及ng-submitted 类和提交范围属性为真布尔值）？

更新：

( function() {
angular
  .module( 'app', [] )
  .controller( 'SubmitController', SubmitController );

function SubmitController() {
  var vm = this;
  vm.submit = submit;

  function submit( e ) {
    console.log( 'Submit!' );
    e.stopPropagation();
  }
}
} )();

form,
[ng-form] {
  padding: 1em;
  border: 1px solid black;
}

.ng-submitted {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="SubmitController as vm">
    <div ng-form>
      <form novalidate ng-submit="vm.submit($event)">
        <input type="text">
        <button type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

主要目标是提交事件未触发且未到达父元素 ([ng-form])。

Answer 1

防止表单提交的简单方法，使用您的 Angular 代码添加这种类型的逻辑条件：

<form name="formName" novalidate ng-submit="formName.$valid && ANY_LOGIC_CONDITION_LIKE_LOGIN.submit()">

这将有助于防止表单提交

Answer 2

看到这个。 使用formName.$valid 阻止提交表单并在您的文本框中添加ng-model。

( function() {
angular.module( 'app', [] )
	.controller( 'FormsController', FormsController );

function FormsController() {
  
	var vm = this;
	vm.submit = submit;
	
	function submit( e ) {
		console.log( 'Submit!' );
		e.preventDefault();
		e.stopPropagation();
	}
}
} )();

[ng-form],
form {
  padding: 10px;
  border: 1px solid #000;
  &.ng-submitted {
    border: 1px solid #f00;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
	<div ng-controller="FormsController as vm">
    <div ng-form>
      <form name="test" novalidate name="test" ng-submit="test.$valid && vm.submit($event)">
        <input type="text" ng-model="vm.test" required>
        <button type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

Answer 3

添加指令后，请参阅 @Taylor Buchanan 的回答 here。你可以简单地从你的 JavaScript 函数中调用它。

你必须做什么：

1. 将该指令添加到您的代码中。
2. 为您的父表单添加一个名称：ng-form="myForm"。
3. 将您的表单传递给您的提交函数：`vm.submit(myForm)'。

4. 然后修改你的函数：

   函数提交（表单）{ console.log('提交！'); form.$setUnsubmitted(); }

附：由于我不确定您要取消提交哪一种表格，所以我假设您两者都想要。但是很明显，你得到了完全的控制，所以你可以相应地修改代码。

Answer 4

更新

看到你的代码/行为（更新后）......
为什么必须提交子表单？ 有什么好处？我看到您使用的是novalidate，所以浏览器验证不起作用。
为什么你不简单地使用ng-click="vm.click(myForm)"。使用父表单不会有任何问题，并且 angularjs 不会添加/设置任何$submitted 状态或ng-selected 类，因此您可以在传递简单表单实例时手动处理。

PLUNKER DEMO

HTML

<div ng-form>
  <form id="myForm" name="myForm" novalidate >
    <label>My Input:</label>
    <input type="text" name="myInput" ng-model="vm.item.myInput" required>
    <button type="button" ng-click="vm.click(myForm)">Submit</button>
  </form>
</div>

控制器/JS

app.controller('MainCtrl', function($scope) {
    vm.click = function (myForm) {
        alert('submitted');
        //myForm.$valid
        //call to server 
    }
});

如果这种方式适合您的场景，那么您就是一个遮阳篷...如果不适合，我希望其他一些解决方案适合您:)

Answer 5

可以触发FormController的$setPristine()方法。您只需要将表单本身作为参数传递给您的提交函数并触发其内置方法。

例如

查看：

<form name="MyForm" ng-submit="submitForm(MyForm)">
    <button type="submit">Submit</button>
</form> 

控制器：

$scope.submitForm = (form) => {
  form.$setPristine();
  alert("Form was submitted")
}

Here's a working example of the above code snippet.

更新

如果你有嵌套的表单并不重要。传播不像你想象的那样工作。您还应该为您的ng-form 命名。然后将其传递给提交函数并再次调用其内置的$setPristine() 方法。

检查这个代码块：

查看：

<div ng-form name="outterForm">
  <form name="myForm" ng-submit="vm.submit($event,myForm, outterForm)">
      <button type="submit">Submit</button>
  </form>
</div>

控制器：

function submit( e, form1, form2 ) {
    console.log( 'Submit!' );
    e.stopPropagation();
    form1.$setPristine();
    form2.$setPristine();
  }

Here's an the updated example based on your code chunk demonstrating the nested forms case.