Question

对Angular确实形成验证的方式感到不满意，我决定实施自己的方式，并遇到了一个老实让我难过的问题。

我的设置如下：

指令用于实例化新表单。
其控制器访问相关的表单架构，然后通过ng-repeat用于在视图中生成字段。
这些输入＆amp;然后，textarea字段通过ng-model绑定到控制器。
在字段更改或表单提交时，控制器将表单数据发送到验证服务，如果适用，它将返回错误，然后绑定到DOM。

我在尝试在第4部分验证之前实施一个卫生步骤时遇到了一个问题。这个卫生步骤理论上应该使用服务方法的返回值更新控制器数据，更新DOM绑定并允许验证步骤使用更新的值。虽然控制器值本身正在更新，但此更改未反映在DOM中。

相关代码如下：

查看：

<div ng-repeat="(field, value) in form.schema">
  <!-- ... -->
  <textarea ng-model="form.data[field]" ng-model-options="{ updateOn: 'blur' }" ng-change="form.changed(field)"></textarea>
  <div class="message">{{ form.errors[field] }}</div>
</div>

控制器：

// Controller submit method
ctrl.submit = function () {

  var err;

  for (var field in ctrl.schema) {
    ctrl.data[field] = validationService.sanitizeField(ctrl.data[field], ctrl.schema[field]);
    ctrl.errors[field] = validationService.validateField(ctrl.data[field], ctrl.schema[field]);
    if (ctrl.errors[field] !== undefined) {
      err = true;
    }
  }

  if (err) {
    return;
  }

  // Proceed ...

服务：

// Public field sanitation method
var sanitizeField = function (value, schema) {
  try {
    // Try sanitation
  }
  catch (e) {
    // Error
  }
  return value;
}

在卫生设施后记录控制器中的新ctrl.data[field]值会产生正确的结果。此结果也正确传递给后续的validateField方法。但是，新数据值未在DOM中更新。

首先，我认为可能是未应用范围或承诺问题的问题。更新服务＆amp;因此控制器没有解决问题。我也尝试在一个对象中包装卫生返回值，但没有用。

奇怪的是，将服务中的返回值从value变量更改为基元，例如'test'，在返回时更新DOM。

同样，从服务验证方法返回的错误（也是字符串而不是变量）会在DOM中相应更新。

尽管进行了大量的搜索，但我还未能找到有关该主题的具体内容。任何见解都会非常感激！

Answer 1

<强>解决！

我不知道，Angular有一个ngTrim指令，该指令自动绑定到输入字段，默认设置为true [Documentation]。

使用此指令，数据会在表单提交之前由控制器拾取之前自动进行修整 - 因此，我的卫生服务部门执行的修剪不会更改数据，而这些数据又不会被反映出来在DOM中，Angular没有接受任何更改。

可以通过在视图中的相关字段上设置ng-trim="false"来减轻此行为。

Answer 2

尝试进行以下操作;

  for (var field in ctrl.schema) {
    ctrl.data[field] = angular.copy(validationService.sanitizeField(ctrl.data[field], ctrl.schema[field]));
    ctrl.errors[field] = angular.copy(validationService.validateField(ctrl.data[field], ctrl.schema[field]));
    if (ctrl.errors[field] !== undefined) {
      err = true;
    }
  }

使用嵌套属性更新对象/数组时，Angular很棘手。您可以使用$scope.$watchCollection来确保对象/数组已更新，也可以使用angular.copy()来确保更新DOM。

使用服务返回的值更新ngModel

2 个答案: