Вопрос:

Установить форму для отправки в AngularJS без нажатия кнопки сброса

angularjs forms modal-dialog

372 просмотра

2 ответа

184 Репутация автора

У меня есть простая форма, размещенная в модальном диалоге:

<div id="myModal6" class="modal fade" role="dialog">
<div class="modal-dialog">

    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Please add Payment Details</h4>
        </div>
        <div class="modal-body clearfix">
            <form id="checkout" class="col-lg-12" ng-submit="checkoutForm.$valid && finishCheckout()" method="post" name="checkoutForm" novalidate>

                <input class="form-control card_number" required ng-model="customer.number" name="number1" ng-minlength=12  maxlength="22" placeholder="xxxx-xxxx-xxxx-xxxx">


                <div class="error" ng-show="(checkoutForm.$submitted || checkoutForm.number1.$dirty && checkoutForm.number1.$invalid) && payee">
                    <small class="error text-danger" ng-show="checkoutForm.number1.$error.required">
                        Card No is required.
                    </small>
                    <small class="error text-danger" ng-show="checkoutForm.number1.$error.minlength">
                        Card No is required to be at least 12 characters
                    </small>
                </div>

                <div class="card_form">
                    <input type="submit" id="submit" value="save">
                </div>

            </form>
        </div>
    </div>
</div>

Когда пользователь нажимает кнопку отправки перед добавлением чего-либо в текстовое поле, появляется сообщение проверки благодаря Angular. Все правильно в мире.

Однако, если пользователь затем нажимает кнопку закрытия и позже возвращается к этому режиму, сообщения проверки остаются. Я обнаружил, что с помощью кнопки сброса я могу передать объект формы в обработчик щелчка, чтобы использовать встроенную функцию $ setPristine для очистки проверки формы, но я хотел бы сделать это без кнопки сброса.

Есть ли способ, которым я могу получить доступ к функции $ setPristine AngularJS, не используя кнопку для подачи объекта формы в мою угловую область?

РЕДАКТИРОВАТЬ:

Я добавил в форму оба следующих элемента:

    <div ng-init="initCardForm(checkoutForm)"></div>
    <input type="button" value="Reset Form" ng-click="resetCardForm(checkoutForm)" /> 

Наряду с их функциями:

    $scope.initCardForm = function(form) { 
        $scope.myForm = form; 
        $scope.myForm.$setPristine(); 
    } 
    $scope.resetCardForm = function(form) { 
        $scope.myForm = form; 
        $scope.myForm.$setPristine(); 
    } 

Кнопка сброса работает, но вызов init не выполняет то, что я пытаюсь сделать. Я полагаю, что это может быть связано с загрузкой модальной памяти при инициализации, которая не инициализируется при каждом вызове модальной программы. Моя цель состоит в том, чтобы каждый раз, когда я показывал модальное всплывающее окно, он устанавливал форму в Pristine.

Автор: Rob Источник Размещён: 08.11.2017 11:11

Ответы (2)


1 плюс

3563 Репутация автора

Решение

Краткий ответ: да, вы можете. Вы можете сделать небольшой трюк ng-initи передать экземпляр формы контроллеру. ( PLUNKER )

HTML

<form name="myForm" class="col-lg-12" novalidate>
  <div ng-init="initForm(myForm)"></div>
  <!-- rest of your html -->
</form>

КОНТРОЛЛЕР

function MyCtrl () {
  $scope.myForm = {};

  $scope.initForm = function(form) {
    // Here you are assigning the form instance to your $scope variable
    $scope.myForm = form;

    //$scope.myForm.$pristine = true;
    //$scope.myForm.$dirty = true; 
    //etc...
  }
}
Автор: The.Bear Размещён: 09.11.2017 01:48

0 плюса

184 Репутация автора

Благодаря помощи The.Bear я смог придумать способ сделать это в полном объеме, в котором я нуждался. В моем случае init в div вызывается только один раз при загрузке полной страницы, а не каждый раз, когда вызывается модальный. Тем не менее, используя пример, который дал The.Bear, я смог установить чистую форму при каждом закрытии модального окна :

HTML

<div id="myModal6" class="modal fade" role="dialog">
...
  <form name="myForm" class="col-lg-12" novalidate>
    <div ng-init="initForm(myForm)"></div>
    <!-- rest of the form -->
  </form>
...
</div>

КОНТРОЛЛЕР

$scope.initCardForm = function(form) {
    console.log("garfield");
    $scope.myCardForm = form;
    $scope.myCardForm.$setPristine();

    $('#myModal6').on('hidden.bs.modal', function () {
        $scope.resetCardForm();
    })
}

$scope.resetCardForm = function() {
    console.log("heathcliff");
    $scope.myCardForm.$setPristine();
}
Автор: Rob Размещён: 09.11.2017 10:46
Вопросы из категории :
32x32