的更新

Question

如何在提交表单时避免提交状态（以及ng-submitted类和提交的范围属性为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

<强>已更新

看到您的代码/行为（更新后）......
为什么必须提交子表单？ 有什么好处？我发现您使用的是novalidate，因此浏览器验证无效。<登记/> 为什么不简单地使用ng-click="vm.click(myForm)"。父级表单不会有任何问题，angularjs不会添加/设置任何$submitted状态或ng-selected类，因此您可以手动处理此类，因为您希望传递一个简单的表单实例。 BR />

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 3

看到这个。使用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 4

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

你需要做什么：

将该指令添加到您的代码中。
为您的父表单添加名称：ng-form="myForm"。
将您的表单传递给您的提交函数：`vm.submit（myForm）'。
然后修改你的功能：

function submit（form）{ console.log（'Submit！'）; 形式为$ setUnsubmitted（）。 }

P.S。由于我不确定你想要提交哪种表格，所以我假设你想要两者。但显然，您正在完全控制，因此您可以相应地修改代码。

Answer 5

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

e.g。

查看：

<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.

提交表单状态防止

5 个答案:

的更新