Запуск проверки формы AngularJS с расширением javascript chrome

Question

Я изо всех сил пытаюсь найти способ вызвать эти классы AngularJS на форме, которую я пытаюсь автоматически заполнить созданным расширением Chrome. Форма (в частности, текстовое поле) должна быть проверена / изменена, прежде чем она будет проверена и, следовательно, отправлена.

Первоначально я пытался использовать javascript, чтобы установить значение текстового поля, используя свойство value. Это не подтвердило форму. Затем я попытался использовать событие отправки для отправки ключа в текстовое поле, что не привело к вводу текста в текстовое поле. Как я могу проверить форму, не требуя участия человека, или это невозможно?

Уточнение , я пытаюсь повторить это действие без ввода пользователя с помощью расширения Chrome.

Ссылка https://www.w3schools.com/angular/angular_validation.asp

Answer 1

Звучит так, будто вам нужно создать несколько событий, чтобы имитировать то, что слушает под углом, вероятно, change или blur. Вот пример использования click от Mozilla:

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#Triggering_built-in_events

function simulateClick() {
  var event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });
  var cb = document.getElementById('checkbox'); 
  var cancelled = !cb.dispatchEvent(event);
  if (cancelled) {
    // A handler called preventDefault.
    alert("cancelled");
  } else {
    // None of the handlers called preventDefault.
    alert("not cancelled");
  }
}

Answer 2

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

Получить элементы управления формами:

var controls = $scope.tdForm.$getControls();

Запустить их валидаторы:

controls.forEach( _ => _.$validate() );

Из документов:

$validate();

Запускает каждый из зарегистрированных валидаторов (сначала синхронные валидаторы, а затем асинхронные валидаторы). Если срок действия меняется на недействительный, модель будет установлена ​​на undefined, если ngModelOptions.allowInvalid не является истиной. Если срок действия изменится на действительный, он установит для модели последнее доступное действительное значение $modelValue, т.е. либо последнее проанализированное значение, либо последнее значение, установленное в области.

Для получения дополнительной информации см.

• Справочник по API AngularJS Form * Справочник по API
• Справочник по AngularJS ngModelController

Answer 3

Когда вы вводите в форму, она обновляет состояние своих элементов управления (коснулся, загрязнен и т. Д.). В соответствии с тем, как вы определяете свои валидаторы полей (обязательно, minLength ...), форма будет действительной или нет после ввода пользователя.

В вашем методе отправки вам не следует продолжать, если какие-либо поля формы недопустимы. См. AngularJS Developer Guide - Forms или Scotch Tutorials - AngularJS Form Validation , вы можете получить более подробную информацию о проверке AngularJS.

Как уже упоминал Майк, вы можете использовать ngClass условно (см. ниже), чтобы применять некоторые классы стилей только в случае возникновения логического условия, например, форма недопустима.

<div ng-controller="ExampleController">
  <form name="form" novalidate class="css-form">

   <input type="text" ng-model="user.name" name="username" ng-class="{ 'error': !isValid }"/>
   <div ng-show="form.$submitted>
     <span ng-show="form.username.$error">Wrong Name</span></span>
   </div>

   <button ng-click="submit(user)"> Submit </button>
  </form>
</div>

angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.isValid = true;

  $scope.submit= function(user) {
    if (user.name != 'Carl') {
      $scope.isValid = false;
    }
  };
}]);

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

$scope.form.$setPristine();
$scope.form.$setUntouched();

$ setPristine устанавливает для $ нетронутого состояния формы значение true, для $ dirty состояния значение false, удаляет ng-dirtyкласс и добавляет нг-нетронутый класс.
Кроме того, он устанавливает для $ представленного состояния значение false. Этот метод также распространяется на все элементы управления, содержащиеся в этой форме.

$ setUntouched устанавливает форму в ее нетронутом состоянии.
Этот метод может быть вызван для удаления класса 'ng-touched' и установки элементов управления формы в их нетронутое состояние (класс ng-untouched). Возвращение элементов управления формы в их нетронутое состояние часто полезно при возвращении формы в первоначальное состояние.

---

ОБНОВЛЕНИЕ

Теперь ясно, чего вы пытаетесь достичь. Два вышеописанных метода могут использоваться для установки состояния формы, но если вы хотите проверить его из кода (это можно сделать, передав форму в службу или, например, непосредственно в контроллер), тогда метод $validate() позволит вамдобиться этого, как упомянуто Джорджем.