AngularJS: кнопка включения при изменении ввода формы

У меня есть приложение с большим количеством настроек на длинных страницах. Вы должны перейти на страницы, чтобы просмотреть текущие настройки или обновить их.

Я хотел бы сделать так, чтобы кнопка "Обновить" была включена только в том случае, если кто-то действительно меняет текущие входы.

Моим наивным подходом было бы добавить атрибут ng-change для каждого входа, который устанавливает флаг enableButton

<form name='form' ng-submit="submit()">
   <input type="sometype" ng-model='something1' ng-change="formChanged=true"></input>
   ...
   <input ng-model='somethingN' ng-change="formChanged=true"></input>
   <button ng-disabled="!formChanged" type="submit" />
</form>

но это кажется утомительным и повторяющимся (у нас много вариантов), и надеялся на что-то простое (что-то вроде "form. $hasChanged"...)

Ответы

Ответ 1

Вместо того, чтобы устанавливать флаг n изменения любого ввода формы, вы должны использовать angular встроенное свойство $dirty на объекте контроллера формы. Он сообщает, взаимодействовал ли пользователь с элементами формы.

<form name='form' ng-submit="submit()">
   <input name="some1" type="sometype" ng-model='something1' ></input>
   ...
   <input name="some2" ng-model='somethingN' ></input>
   <button ng-disabled="!form.$dirty" type="submit" />
</form>

Используя флаг $pristine, вы можете сделать

<button ng-disabled="form.$pristine" type="submit" />

Аналогично, если у вас есть валидаторы в форме, вы также можете использовать свойство $valid, например, отключите кнопку, если форма недействительна или нет

<button ng-disabled="form.$pristine|| form.$invalid" type="submit" />