gpt4 book ai didi

javascript - Angular : Ng-show only while off Input Field in Form

转载 作者:行者123 更新时间:2023-11-28 18:23:35 26 4
gpt4 key购买 nike

https://jsfiddle.net/jzhang172/xu93yubL/

特定问题出现在我的电子邮件输入字段中。
是否可以仅在验证字段之后并且当用户不在输入字段内时显示 ng-show 消息?

换句话说,如果用户位于输入字段上,我希望 ng-show 消息消失。

我尝试了多种逻辑组合,但未能使其发挥作用:

(function(angular) {
'use strict';
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.master = {};

$scope.update = function(user) {
$scope.master = angular.copy(user);
};

$scope.reset = function(form) {
if (form) {
form.$setPristine();
form.$setUntouched();
}
$scope.user = angular.copy($scope.master);
};

$scope.reset();
}]);
})(window.angular);
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>


<body ng-app="formExample">
<div ng-controller="ExampleController">
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required="" />
<br />
<div ng-show="form.$submitted || form.uName.$touched">
<div ng-show="form.uName.$error.required">Tell us your name.</div>
</div>

E-mail:
<input type="email" ng-model="user.email" name="uEmail" required="" />
<br />
<div ng-show="form.$submitted || form.uEmail.$touched">
<span ng-show="form.uEmail.$error.required" style="background:red;">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email"style="background:red;">This is not a valid email.</span>
</div>


</form>

</div>
</body>

最佳答案

您可以使用 ngFocusngBlur 指令来实现所需的结果...

只需在 ngFocus 上设置一些变量 false 并使用 ngBlur 设置 true 并将该变量添加到您的 ngShow 条件中...

 <input type="email" ng-model="user.email" name="uEmail" required="" ng-focus="showEmailValidationMsg = false;" ng-blur="showEmailValidationMsg = true;"/>
<br />
<div ng-show="(form.$submitted || form.uEmail.$touched) && showEmailValidationMsg">
<span ng-show="form.uEmail.$error.required" style="background:red;">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email"style="background:red;">This is not a valid email.</span>
</div>

这里正在工作 JSFIDDLE ...

关于javascript - Angular : Ng-show only while off Input Field in Form,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39549294/

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