Как правильно очистить форму с недопустимым вводом от контроллера AngularJS?

У меня есть форму AngularJS, которая содержит - среди других полей - один из типов url. Последнее важно, поскольку это приводит к тому, что соответствующий вход является допустимым URL.

При определенных условиях (например, модальный диалог с такой формой должен быть закрыт), я хочу прояснить эту форму программно. Для этой цели я реализовал метод reset, который в основном очищает соответствующую модель формы, устанавливая $scope.formData = {}. Таким образом, он устанавливает модель формы в новый пустой объект.

В то время как это назначение очищает все допустимые поля в визуализированной HTML-форме, оно делает не очистить недействительные поля, такие как неверный URL-адрес. Например, если пользователь предоставит недопустимый ввод ht://t/p в качестве URL-адреса, этот вход не будет удален из визуализированной формы.

Я думаю, что это связано с тем, что какой-либо недопустимый URL-адрес не отражен в модели - такой недопустимый URL-адрес просто не "сделает" его для модели, потому что он не проходит проверку в массиве NgModelController#$parsers. Таким образом, в модели нет URL-адреса вообще. Следовательно, сброс модели формы до {} не может фактически изменить URL-адрес модели, поскольку он еще не установлен.

Однако, если метод reset явно задает поле $scope.formData.url = "", недопустимый URL-адрес будет очищен должным образом (по крайней мере, обработанная форма больше не отображает его). Это вызвано явным изменением URL-адреса в модели. Однако теперь модельная переменная formData.url содержит пустую строку (ну, что не удивительно), а при использовании = {} все поля будут undefined вместо этого.

При назначении отдельных полей "" работает как обход для простых форм, он быстро становится громоздким для более сложных форм со многими полями.

Таким образом, как я мог программно reset форма эффективно и эффективно - включая все недопустимые поля ввода?

Я создал Plunker в http://plnkr.co/c2Yhzs, где вы можете изучить и запустить полный пример, демонстрирующий вышеупомянутый эффект.

Ответ 1

Укажите тип вашей кнопки как reset. Это не только вызовет функцию ngClick, но и очистит содержимое формы HTML.

<button type="reset" ng-click="resetFormData()">Reset</button>

Ответ 2

Я думаю, что это решение умеренно элегантно: ваш plnkr рассмотрен
Большая разница - это инициализация вашего объекта модели.

Я думаю, что все становится беспорядочным, когда переменная становится undefined, она больше не обновляется.. она должна быть связана (veeeery) глубоко с тем, как работает валидация ( docs)

Возвращая undefined, в этом случае модель не обновляется, я думаю, что это именно то, что происходит за завесой

PS: вы можете перерабатывать resetImplicitly для всех своих форм в webapp:)

Ответ 3

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

В моем контроллере:

$scope.cleanForm = function() {
  $scope.myFormName.$rollbackViewValue();
};

Просто вызовите с помощью ng-click или любым способом, который вы хотите.

Приветствия

Ответ 4

Вещь - это тег типа "url", что означает если пользователь вводит конкретный действительный URL-адрес, тогда только он установит значения модели

Если пользователь будет явно reset, это означает, что установка значений модели на "" снова приведет к потере текста.

Похоже, что он устанавливает значения, но на самом деле нет, поэтому, когда вы устанавливаете его значение в значение ".Angular будет устанавливать модальное значение в значение" "Возьмем еще один пример: замените" текст "на" email"

<input type="email" ng-model="formData.name" />
      <br />URL:
      <input type="url" ng-model="formData.url" />
      <br />

В приведенном выше коде Если вы введете недопустимый адрес электронной почты, он не установит значения модели электронной почты.

Ответ 5

Вероятно, вам нужно сделать копию модели в ее первозданном состоянии и установить модель в исходное состояние, когда вы reset.

Вот хороший пример:

http://www.angularjshub.com/examples/forms/formreset/

Ответ 6

Поля формы url передаются в модель только в том случае, если они действительны. Таким образом, в случае записи invlaid-url в форме переменная области видимости не присваивается модели и очистка записи форм путем назначения пустого объекта модели будет по-прежнему сохраняться на фронте интерфейса.

Лучшей альтернативой этому является назначение модели, связанной с данными формы, с помощью null. Аналогичный ответ появляется здесь:

fooobar.com/questions/238564/...

Ответ 7

нг кнопкой мыши = "FormData = {};"

просто так,

<button ng-click="formData={}">(1) Reset Full Data: formData = {}</button>

Reset ваши данные формы непосредственно в ng-click.