在重置表单上隐藏 ng-Message

Question

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

<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>

如果某个字段有 'required' 错误，下面的代码将始终显示消息，无论字段是否被触摸，脏与否：

<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 依赖项列表中：

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

如果你不做最后两件事，ng-message 和 ng-messages 属性将没有效果，所有 div 元素将被显示，无论字段错误（除非被那个ng-show隐藏了我补充说）。

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

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

在重置表单上隐藏 ng-Message

Hide ng-Message on Reset form

javascript

web-deployment

angularjs

single-page-application