Angularjs + Включение и отключение кнопки отправки

У меня есть пример кода, как это:Angularjs + Включение и отключение кнопки отправки

HTML код:

<body ng-controller="MainCtrl"> 
    <form name="myForm"> 
     <input name="myText" type="text" name="test" ng-model="mytext" required /> 
     <button ng-click="save()" ng-disabled="myForm.$invalid">Save</button> 
    </form> 
    </body>

Js код:

var app = angular.module('angularjs-starter', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 

    $scope.save = function(){ 
    //logic or http method 
    console.log("Test"); 
    } 
});

Прикрепленный код в этой ссылке: Click Here

Логика:

Кнопка отмены по умолчанию отключена.
После ввода формы включите кнопку.
После сохранения снова отключите кнопку сохранения.
Снова пользователь вводит текст, чтобы включить кнопку сохранения.

Примечание: Здесь я прикрепляю только один вход, но у меня есть несколько полей ввода. Кроме того, в функции сохранения я сохранил логические данные в базе данных.

источник

2016-12-18 RSKMR

и в чем ваш вопрос в точности? –

вы не проверяли, загрязнена ли форма, и это легко (myForm. $ Грязный), а затем вы установите форму в нетронутую в вашей функции save(), но ваша область $ будет испорчена, поэтому вам нужно проверить это сообщение: http://stackoverflow.com/questions/27191744/setpristine-not-working –

Вы можете использовать $pristine, чтобы определить, есть ли какие-либо изменения в форму и кнопки включения только тогда:

<body ng-controller="MainCtrl"> 
    <form name="myForm"> 
     <input name="myText" type="text" name="test" ng-model="mytext" required /> 
     <button ng-click="save(myForm)" ng-disabled="myForm.$invalid || myForm.$pristine">Save</button> 
    </form> 
</body>

Обратите внимание, как $pristine используется на ng-disabled:

ng-disabled="myForm.$invalid || myForm.$pristine"

В этом случае кнопке будет отключен, если форма недействительна или если никаких изменений в форме не было.

Если вы используете этот подход, вам также необходимо установить форму в исходное состояние после сохранения данных. Вы можете использовать метод $setPristine:

$scope.save = function(myForm) { 
    // set form to pristine 
    myForm.$setPristine(); 
}

Обратите внимание, что есть параметр формы, который используется для передачи формы к методу. В HTML также необходимо передать этот параметр как часть ng-click:

ng-click="save(myForm)"

Вот JSFiddle that demonstrates the functionality

Для получения дополнительной информации ознакомьтесь с documentation of FormController.

источник

2016-12-18 13:52:04 dotnetom

спасибо. его работа – RSKMR

вы отключили кнопку отправки, когда форма недействительна.

myForm.$invalid

поэтому, когда требуемое поле пустым, форма будет недействительной, и кнопка будет отключена. Как только все необходимые данные в форме имеют значения, кнопка отправки будет включена.

Чтобы отключить его, вам необходимо сбросить все модальные переменные требуемых входных данных, как только сохранение выполнит свою работу. На успешном обратном вызове HTTP-запроса сбросьте переменные модели.

источник

2016-12-18 13:54:56 Deep

-1

Ну вот, как бы я это сделал, я добавлю еще одну переменную отслеживания. что-то вроде этого.

$scope.btnStatus = true; 
    $scope.save = function(){ 
    //logic or http method 
    $scope.btnStatus = false; 
    console.log("Test"); 
    } 
    $scope.onChange = function(){ 

    if($scope.btnStatus == false) 
     $scope.btnStatus = true; 
    }

и html будет выглядеть так.

<form name="myForm"> 
    <input name="myText" type="text" name="test" ng-change="onChange()" ng-model="mytext" required /> 
    <button ng-click="save()" ng-disabled="myForm.$invalid || !btnStatus">Save</button> 
</form>

Вот рабочий code основе с вашего кода.

источник

2016-12-18 14:02:02 Miqe

с использованием $ pristine лучше, не нужно больше переменных или функций –

@JohanBlomgren просто потому, что есть лучшие способы сделать это, это не значит, что я заслуживаю проголосовать. Спасибо, в любом случае – Miqe

Angularjs + Включение и отключение кнопки отправки

ответ

Смежные вопросы