提交表单状态防止

Question

如何在提交表单时避免提交状态（以及ng-submitted类和提交的scope属性为true boolean）？

更新：

( 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. 然后修改你的功能： function submit（form）{console.log（'Submit！'）;形式为$ 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()方法。您只需将表单本身作为参数传递给提交函数并触发其内置方法。

EG

视图：

<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一个名字。然后将其传递给submit函数并再次调用其内置的$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.