Question

我正在努力寻找一种方法来触发我试图自动填充正在创建的chrome扩展的表单上的这些AngularJS类。表单（特别是文本框）必须先经过验证/修改，然后才能提交并进行验证。

我最初尝试使用javascript通过value属性设置文本框的值。这没有验证表格。然后，我尝试使用调度事件将键发送到文本框，这导致没有任何内容输入到文本框中。我如何在不需要人工输入的情况下验证表格？或者这不可能吗？

说明，我正在尝试通过使用Chrome扩展程序在没有用户输入的情况下复制此操作。

引用https://www.w3schools.com/angular/angular_validation.asp

Answer 1

像您这样的声音需要创建一些事件来模拟正在监听的任何角度，可能是change或blur。这是使用来自mozilla的click的示例：

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，即最后一个解析值或从范围设置的最后一个值。

有关更多信息，请参见

Answer 3

当您键入表单时，它会更新其控件的状态（触摸，脏污等）。根据您定义字段验证器的方式（必填，minLength ...），该格式在用户输入后将有效还是无效。

在您的Submit方法中，如果任何表单字段无效，则不应继续。请参阅AngularJS Developer Guide — Forms或Scotch Tutorials — AngularJS Form Validation，您可以了解有关AngularJS验证的更多详细信息。

正如Mike所提到的，只有在出现布尔条件（例如形式无效）时，才可以有条件地使用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 将表单的$ pristine状态设置为true，将$ dirty状态设置为false，删除ng-dirty类并添加ng-pristine类。
此外，它还将$ submitted状态设置为false。此方法还将传播到此表单中包含的所有控件。

$ setUntouched 将表单设置为未触摸状态。
可以调用此方法以删除“ ng-touched”类并将表单控件设置为未触摸状态（ng-untouched类）。   将表单控件重新设置为原始状态通常很有用。

更新

现在很明显，您正在尝试实现什么。可以使用上述两种方法来设置表单状态，但是如果您想通过代码验证表单状态（例如，可以将表单传递给服务或直接在控制器中完成），那么$validate()方法将允许您可以实现乔治提到的目标。

使用javascript chrome扩展名触发AngularJS表单验证

3 个答案:

`$validate();`