在重置表单上隐藏ng-Message

Question

我是初学者使用AngalurJs和Material AngalurJs
我需要解决一个小问题
用户单击重置按钮时，我需要隐藏错误消息
我尝试了$setUntouched和$setPristine
更改状态输入但不隐藏消息
我也尝试了ng-if和ng-show并且不起作用
我将其用于ng-messages的HTML代码：

<div ng-messages="formName.fieldName.$error">
     <div ng-message="required">...</div>
</div>

和js代码进行重置：

<button ng-click="onclear">Clear</button>

// on controller js file code :
$scope.onclear = function(){
   $scope.formName.$setUntouched();
   $scope.formName.$setPristine();
}

Answer 1

所以这是我看到的可能的问题：

要调用函数，您需要使用带有onclear括号：

<button ng-click="onclear()">Clear</button>

如果某个字段存在“必填”错误，则以下代码将始终显示该消息，无论该字段是否被触摸，是否脏污：

<div ng-messages="formName.fieldName.$error">
    <div ng-message="required">...</div>
</div>

要隐藏基于$touched和$dirty的消息，请使用如下所示的内容：

<div ng-messages="formName.fieldName.$error"
     ng-show="formName.fieldName.$dirty && formName.fieldName.$touched">
    <div ng-message="required">...</div>
</div>

还要确保您包括了angular-messages.js文件：

<head>
    <!-- include angular and whatever -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.js"></script>
    <!-- ... -->
</head>

并且在创建应用程序模块时将'ngMessages'添加到了角度依赖性列表中：

angular.module('app', ['ngMessages']);

如果您不做最后两件事，则ng-message和ng-messages属性将不起作用，所有div元素都会显示，无论字段错误如何（除非被我添加的ng-show隐藏）。

看看我做的这个例子： https : //plnkr.co/edit/fuqsr6WRdBKoebPq1Igs?p=preview

在示例中，我将值绑定到控制器而不是$ scope，这就是为什么您会看到$ctrl ，希望这不会使您感到困惑。

在重置表单上隐藏ng-Message

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-09-24 00:46:09

在重置表单上隐藏ng-Message

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-09-24 00:46:09

解决方案1
1 已采纳 2016-09-24 00:46:09