[英]How to reset the Angularjs ui-select component all selections without red color error highlight when ui-select marked as required
I'm trying to reset all selection of angularjs ui-select. 我正在尝试重置angularjs ui-select的所有选择。
but ui-select marked as required field 但ui-select标记为必填字段
.so that when I set the ui-select element as undefined as shown below. .so,这样当我将ui-select元素设置为undefined时,如下所示。
$scope.country.selected = undefined;
ui-select element indicates a validation error with red colour.Anyway, i want to reset selection without prompting validation error with the existing required attribute. ui-select元素表示验证错误为红色。无论如何,我想重置选择而不用现有必填属性提示验证错误。
<ui-select required ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select or search a country in the list...">
<span>{{$select.selected.name}}</span>
<button class="clear" ng-click="clear($event)">X</button>
</ui-select-match>
<ui-select-choices repeat="country in countries | filter: $select.search">
<span ng-bind-html="country.name | highlight: $select.search"></span>
<small ng-bind-html="country.code | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
Add a form as bellow then you can setPristine to reinitialize the status of the form (You can also see the plunker link to see the working example): 在下面添加一个表单,然后可以设置setPristine来重新初始化表单的状态(您还可以查看plunker链接以查看工作示例):
<form name="formName" novalidate>
<h3>Selectize theme</h3>
<p>Selected: {{country.selected}}</p>
<ui-select required ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select or search a country in the list...">
<span>{{$select.selected.name}}</span>
<button class="clear" ng-click="clear($event)">X</button>
</ui-select-match>
<ui-select-choices repeat="country in countries | filter: $select.search">
<span ng-bind-html="country.name | highlight: $select.search"></span>
<small ng-bind-html="country.code | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
</form>
JavaScript JavaScript的
$scope.clear = function($event) {
$event.stopPropagation();
$scope.country.selected = undefined;
$scope.formName.$setPristine();
};
You can see the Working example plunker in here 您可以在此处看到工作示例插件
The angular 1.3 introduced the touched concept: angular 1.3引入了感人的概念:
touched vs pristine : touched means the field has been blurred while pristine means the field's value has been modified. 触摸vs原始 :触摸表示该字段已模糊,而原始表示该字段的值已被修改。 Angular's docs note that "Setting a form controls back to their untouched state is often useful when setting the form back to its pristine state." Angular的文档指出:“将表单控件设置回其原始状态通常在将表单设置回其原始状态时很有用。”
$scope.formName.$setUntouched()
I hope this can help 我希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.