清除嵌套指令中的无效输入字段

Clear invalid input fields in nested directives

本文关键字：无效 输入 字段 嵌套 指令 清除      更新时间：2023-09-26

我在angularjs中清除无效字段有问题。我读过这个线程:

AngularJS:再次设置模型为= {}not 't clear out input type='url'

如何从AngularJS控制器正确清理表单无效输入?

但是似乎什么都帮不了我。我已经尝试了所有建议的解决方法，但就是行不通。

我有这个html，它是更大指令模板的一部分:

...
<form name="providerSearch">
   <text-box type="text" ng-model="providerSearchModel.contains.Address" id="SettlementAgentSearch_ProviderSearch_StreetAddress"></input>
   <text-box type="text" ng-model="providerSearchModel.contains.City"   id="SettlementAgentSearch_ProviderSearch_City"></input>
   <text-box type="text" ng-model="providerSearchModel.beginsWith.criteria.Zip" id="SettlementAgentSearch_ProviderSearch_Zip"></input>
</form>
...
<span class="btn btn-link" ng-click="clearSearchFilters()">Clear</span>

文本框指令:

...
scope: {
   model: '=ngModel',
...
},
...

和指令a中的代码如下:

...
link: function(scope,elem,attrs,ctrl) {
   scope.providerSearchModel = {};
   var setProviderModel = function() {
     scope.providerSearchModel = {
        contains: {},
        beginsWith: { filter: 'beginsWith', criteria: {} }
     };
   };
   setProviderModel();
   scope.clearSearchFilters = function() {
       setProviderModel();
   }
}
...

到目前为止，这工作得很好，但现在我有需要添加模式到City字段，它不能包含数字。我将正则表达式添加到输入字段，但现在当值不正确时，我无法从UI中清除该字段。

我已经尝试了其他线程建议的解决方案，但它不适合我，我错过了什么?

尝试将scope.clearSearchFilters更改为此，但没有帮助:

scope.clearSearchFilters = function() {
   scope.providerSearchModel = {
      contains: null,
      beginsWith: { filter: 'beginsWith', criteria: null }
   };
}

尝试使用$ set质朴()，没有运气:

 scope.clearSearchFilters = function() {
   scope.providerSearchModel = {
      contains: null,
      beginsWith: { filter: 'beginsWith', criteria: null }
   };
   scope.providerSearch.$setPristine();
}

还尝试将该字段显式设置为null或"，但没有成功:

scope.clearSearchFilters = function() {
   scope.providerSearchModel.City = null; // or scope.providerSearchModel.City = "";
   scope.providerSearchModel.City = {
      contains: null,
      beginsWith: { filter: 'beginsWith', criteria: null }
   };
   scope.providerSearch.$setPristine();
}

我已经创建了plunker，反映了我的问题，模式是在输入上，只允许字符，所以测试用例可以是:test有效数据，和test1无效…

http://plnkr.co/edit/R5utIfukkOlznoCwi31i?p =预览

由于评论对话而编辑:

问题是显示与模型值的组合，以及"未定义"。在原始的柱塞示例中，将'<br/>"{{ providerSearchModel.contains.City }}"'添加到mainDirective模板中(就在按钮后面)，并键入两个测试用例:正如您可以看到的test1，模型值为空(因为Angular不会让无效值进入模型)。

将容器更改为空将使所有ng-model值未定义，这不会导致视图更新。

对于直接角，你需要将每个字段值设置为空字符串或null:

var setProviderModel = function() {
    scope.providerSearchModel = {
      contains: {City:null},
      beginsWith: { filter: 'beginsWith', criteria: null }
    };
  };

对于清除整个表单，如果您将所有字段ng-models放在同一个容器中，您可以遍历容器中的属性并将每个属性设置为null。例如

var clearForm = function() {
    // Set all properties in the ng-model container to null
    for (var prop in scope.providerSearchModel.contains) {
        if (scope.providerSearchModel.contains.hasOwnProperty(prop)) {
            scope.providerSearchModel.contains[prop] = null;
        }
    } 
    scope.providerSearchModel.beginsWith: { filter: 'beginsWith', criteria: null};
    };
  };
相关文章：