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

<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元素都会显示，而不管字段错误（除非被{{1隐藏）我添加了。）

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

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

在重置表单上隐藏消息

1 个答案: