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

Question

我在 angularjs 中清除表单中的无效字段时遇到问题。我已阅读此主题：

AngularJS: Set the model to be = {} again doesn't clear out input type='url'

How to properly clean form with invalid input from AngularJS controller?

但似乎没有什么能帮助我。我已经尝试了所有建议的解决方案，但我无法使其发挥作用。

我有这个 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 }
   };
}

用 $setPristine() 试过了，没有运气：

 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，patter 是只允许字符的输入，因此测试用例可以是：test 表示有效数据，test1 表示无效。 ..

http://plnkr.co/edit/R5utIfukkOlznoCwi31i?p=preview

Answer 1

因评论对话而编辑：

问题是显示值与模型值的组合，以及“未定义”。使用原始 plunker 示例，将 '<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};
    };
  };