Submitted form state preventing - css

Question

How can I avoid submitted state (and ng-submitted class & submitted scope property as true boolean) in a form when it is submitted?
Updated:
( 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>
The main objective is that submit event was not fired and not arrived to parent element ([ng-form]).

Answer 1

Simple way to prevent the form to submit, add this type of logical condition with your Angular code:
<form name="formName" novalidate ng-submit="formName.$valid && ANY_LOGIC_CONDITION_LIKE_LOGIN.submit()">
This will help to prevent the form submission

Answer 2

See this.
Use formName.$valid to prevent submit form and add ng-model in your text box.
( 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

See #Taylor Buchanan's answer here, once you added the directive. you can simply call it form your JavaScript function.
What you have to do:
Add that directive to your code.
Add a name to your parent-form: ng-form="myForm".
pass your form to your submit function: `vm.submit(myForm)'.
And then modify your function:
function submit( form ) {
console.log( 'Submit!' );
form.$setUnsubmitted();
}
P.S. Since I wasn't sure which one of the forms you wanted to unSubmit, So I assumed you want both. But Obviously, you are getting full controll, so you can modify the code accordingly.

Answer 4

UPDATED
Seeing you code/behavior (after the update)...
Why must you submit the child form? What is the benefit? I'm seeing that you are using novalidate, so browser validation won't work.
Why you don't simply use a ng-click="vm.click(myForm)". You won't have any troubles with parent form, and angularjs won't add/set any $submitted state or ng-selected class, so you can handle this manually as you want passing a simple form instance.
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>
CONTROLLER/JS
app.controller('MainCtrl', function($scope) {
vm.click = function (myForm) {
alert('submitted');
//myForm.$valid
//call to server
}
});
If this way fits for your scenario, here you are an awnser... If not, I hope some of others solutions works for you :)

Answer 5

You can trigger $setPristine() method of FormController. You just need to pass the form itself as an arguement to your submit function and trigger its built in method.
e.g.
View:
<form name="MyForm" ng-submit="submitForm(MyForm)">
<button type="submit">Submit</button>
</form>
Controller:
$scope.submitForm = (form) => {
form.$setPristine();
alert("Form was submitted")
}
Here's a working example of the above code snippet.
Update
It doesn't matter if you have nested forms. Propagation doesn't work like you think it does. You should also give your ng-form a name. Then pass it down to the submit function and call its built in $setPristine() method once more.
Check this code chunk:
View:
<div ng-form name="outterForm">
<form name="myForm" ng-submit="vm.submit($event,myForm, outterForm)">
<button type="submit">Submit</button>
</form>
</div>
Controller:
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.