gpt4 book ai didi

javascript - 在重置表单上隐藏 ng-Message

转载 作者:行者123 更新时间:2023-12-03 06:03:06 25 4
gpt4 key购买 nike

我是使用 AngalurJs 和 Material AngalurJs 的初学者
我需要解决一个小问题
当用户单击重置按钮时,我需要隐藏错误消息
我尝试了 $setUntouched$setPristine
改变状态输入但不隐藏消息
我还尝试了 ng-ifng-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();
}

最佳答案

以下是我看到的可能存在的问题:

要调用函数,需要在 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 依赖项列表中:

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

如果你不做最后两件事,ng-messageng-messages属性将不起作用,所有div元素都会显示,无论字段错误(除非被我添加的 ng-show 隐藏)。

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

在示例中,我将值绑定(bind)到 Controller 而不是 $scope,这就是为什么您会看到 $ctrl,希望这不会让您感到困惑。

关于javascript - 在重置表单上隐藏 ng-Message,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39670799/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com