Предоставленная форма предотвращение состояния

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

Простой способ предотвратить форма представить, добавьте этот тип логического условия с Угловая код:

<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, поэтому вы можете справиться с этим вручную, поскольку хотите передать простой экземпляр формы.

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 
    } 
}); 

Если этот способ подходит для сценария, здесь вы являетесь awnser ... Если нет, я надеюсь, что некоторые из других решений будут работать для вас :)

Answer 3

Посмотрите это. Используйте formName.$valid, чтобы предотвратить отправку формы и добавьте ng-model в свое текстовое поле.

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

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

[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"> 
 
\t <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 Бьюкенена here после того, как вы добавили директиву. вы можете просто называть его формой своей функции JavaScript.

Что вы должны сделать:

1. Добавить эту директиву в ваш код.
2. Добавить имя в свою родительскую форму: ng-form="myForm".
3. передайте вашу форму в вашу функцию отправки: `vm.submit (myForm) '.

4. А затем измените функцию:

   функция представить (форма) { console.log; ('Submit!') форму. $ SetUnsubmitted(); }

P.S. Поскольку я не был уверен, какую из форм вы хотели бы отпустить, я предположил, что вы хотите оба. Но, очевидно, вы получаете полный контроль, поэтому вы можете соответствующим образом изменить код.

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.

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

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