angularjs - 防止异步唯一验证器仅在编辑时验证相同的值?

标签 angularjs angularjs-directive angularjs-validation angularjs-forms

我有一个 AngularJS 表单,它有一个自定义验证器,用于与服务器后端检查输入值是否唯一。唯一验证由 mob-async-validate-unique 完成以下示例中的指令。

表格看起来有点像这样:

<form class="form-floating" novalidate="novalidate" ng-submit="saveItem(item)">
    <div class="form-group filled">
        <label class="control-label">Key</label>
        <input type="text" class="form-control" ng-model="item.Key" mob-async-validate-unique >
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-lg btn-primary">Save</button>
    </div>

</form>

我想使用相同的表单来添加和编辑我放置的模型 $scope .

一切都很好,除了唯一验证器在编辑操作时触发,即使该值与原始值相同,然后将唯一验证器验证为 false,因为该值已经存在。在以下两种情况下,验证器都会将该字段标记为无效:
  • 更改字段值,然后将其编辑回原始值
  • 提交表单而不更改任何内容

  • 实现这一目标的最佳方法是什么?我能想到的天真方法是我必须将原始值存储在 $scope.originalValue 上。变量,然后在唯一验证的元素上添加一个属性来命名这个变量。在验证器中,我将从 $scope 中读取此值并将其与当前值进行比较,以使验证器在两个值相同时接受它。我正在继续并实现这一点。

    我在几个地方以通用方式使用了唯一验证器(是的,在 <input> 元素上还有几个正在使用的属性,为了简单和易读性,我没有包含在代码示例中)并且需要验证器来运行完全独立,理想情况下希望保留 Controller $scope在图片之外,以便我可以在任何我想要的任何地方/任何地方使用自定义异步验证器。

    最佳答案

    根据您使用的 angularjs 版本,绝对不需要编写自定义异步验证器。
    Angular 有一种内置的方式来做到这一点。查询 https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

    当您按照文档中的描述使用 $asyncValidator 时,如果所有其他验证都成功,它只会针对您的 API 进行验证。

    ** 编辑 **
    关于编辑数据库中现有条目的异步验证问题,我建议如下。

    var originalData = {};
    if(editMode) {
      originalData = data.from.your.API;
    } 
    $scope.formData = angular.copy(orignalData);
    
    // in your async validator
    if(value && value !== orginalData(key)) {
      //do async validation
    } else if(value == originalData(key)) {
      return true;  //field is valid
    }
    

    关于angularjs - 防止异步唯一验证器仅在编辑时验证相同的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33409563/

    相关文章:

    angularjs - 隐藏/显示 AngularJS 或基于经过身份验证的用户权限的任何其他单页应用程序 ui 组件的正确方法是什么?

    angularjs - 收集 AngularJS 和 Ionic 崩溃

    javascript - 如何以正确的方式在 Angular 应用程序中的 Controller 之间共享数据

    javascript - 使用 ng-maxlength 时不会触发 $watch 监听器

    angularjs - 为什么添加额外的 AngularJS 验证指令会导致 $async Validators 运行多次?

    javascript - 从 Protractor 页面对象返回一个对象

    javascript - AngularJS 仅在 ng-repeat 中显示最后一个元素

    angularjs - 移动由 ng-repeat 创建的 angularJS 元素

    javascript - 亚马逊 DynamoDB 和 AngularJS

    javascript - "myApp"应用程序中的 Angular JS 表单验证。