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>

text-box指令：

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

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

Answer 1

由于评论对话而被编辑：

问题是显示与模型值的组合，以及“未定义”。使用原始的plunker示例，将'<br/>"{{ providerSearchModel.contains.City }}"'添加到mainDirective模板（按钮后面），然后输入两个测试用例：正如您在 test1 中看到的那样，模型value为空（因为Angular不允许无效值到达模型）。

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

只需使用直角修正，您需要将每个字段值设置为空字符串或null：

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

对于清除整个表单，如果将所有字段ng模型放在同一容器中，则可以迭代容器中的属性并将每个属性设置为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};
    };
  };

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

1 个答案: