Condition Prevention Form Provided

Question

How can I avoid representing the state (and the ng-submittedclass and property of the displayed area as true boolean) in the form when I submit it?

Update

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

Run codeHide result

The main goal is that the send event was not triggered and was not sent to the parent element ( [ng-form]).

Answer 1

An easy way to prevent form submission is to add this type of logical state to your Angular code :

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

This will help prevent form submission.

Answer 2

UPDATED

/​​ ( )...
? ? , 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 
    }
});

, awnser... , , :)

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>

Hide result

Answer 4

. @Taylor Buchanan , . JavaScript.

:

• .
• : ng-form="myForm".
• : `vm.submit(myForm) '.

• :

  submit () {  console.log( "!" );   $setUnsubmitted(). }

P.S. , , , . , , , .

Answer 5

$setPristine() FormController. .

.

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

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

.

Update

, . , . 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();
  }

, , .