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

Question

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

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

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

$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

Answer 1

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

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

контроллер:

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

Это будет работать

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