Невозможно установить грязное поле формы

Я искал ответ на этот вопрос и наткнулся на несколько сообщений, но ни один из них у меня не работает.

Я хочу сделать что-нибудь простое. У меня есть кнопка, которая невидима, пока форма не станет грязной. Это отлично работает, если я вручную испачкаю форму. Однако я сохраняю данные. когда форма загружена, сохраненные данные заполняются, но форма не загрязняется, когда данные серверной части обновляются таким образом.

Итак, я решил, что просто установил грязную форму вручную. Но я получаю "неопределенные" ошибки.

$scope.myForm = > undefined
$scope.$myForm => undefined
myForm = > returns the form object
myForm.myField = > returns the field
myForm.myField.$dirty => returns undefined
myForm.myField.$setDirty() = > returns "$setDirty is not a function"
this (inside my controller) = > returns and empty object

Я использую angular 1.6.6. Я читал: Angular .js программно устанавливает грязное поле формы,

Как явно установить текстовое поле в форму испачкать?,

Как установить грязное поле в форме в angularjs 1.3

Моя основная форма:

<div ng-controller="appCtrl">
    <form name="myForm">
        <input name="myField" ng-model="myField" />
        <div ng-click="doSomething()" ng-show="myForm.myField.$dirty">Submit</div>
    </form>
</div>

Я добавил плункер, который показывает мою проблему. https://plnkr.co/edit/ZUWywfOj329g6sviHIZf?p=preview


validation forms angularjs angular1.6
person Wayne F. Kaskie    schedule 24.09.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

<form name="myForm" ng-init="formInit()">

контроллер:

$scope.formInit = function() {
    $timeout(function() {
      $scope.myForm.$setDirty(); 
    })
}

Это сработает.

Теперь я просто хочу сказать, почему вы используете dirty для отображения формы отправки? Почему бы не проверить с помощью required и myForm. $ Valid?

Почему бы просто не использовать:

<div ng-controller="appCtrl">
    <form name="myForm">
        <input name="myField" ng-model="myField" />
        <div ng-click="doSomething()" ng-show="myField">Submit</div>
    </form>
</div>
person Fetrarij    schedule 24.09.2017
comment
Я надеялся, но это не сработало. Запись значения формы, например: $ scope.myForm, по-прежнему возвращает undefined. Как и раньше, я могу зарегистрировать myForm и получить элемент DOM формы. Моя форма имеет только одно поле, раскрывающееся меню / выбор. Я не хочу, чтобы пользователь мог нажимать кнопку, пока что-то не выберет. Это прекрасно работает, проблема возникает только тогда, когда я предварительно заполняю поле для них. - person Wayne F. Kaskie; 25.09.2017
comment
@ WayneF.Kaskie, вы добавили набор данных загрузки в formInit? другая возможность - если вы используете одно поле выбора, вы можете проверить его по значению ngModel. - person Fetrarij; 25.09.2017
comment
Спасибо, что помогли мне с этим. Я положил треску в плункер, чтобы продемонстрировать проблему. - person Wayne F. Kaskie; 25.09.2017
comment
@ WayneF.Kaskie plnkr.co/edit/lEissy?p=preview, я добавил тайм-аут, но почему бы просто не использовать: ng-show = myField - person Fetrarij; 25.09.2017
comment
СПАСИБО Fetra! Это работает. Я придумал несколько разных способов справиться с этим, так как форма очень проста. Но я знаю, что этот метод должен быть возможен, поэтому я хотел знать, как это сделать. - person Wayne F. Kaskie; 26.09.2017