隐藏/以角显示提示文本
隐藏/以角显示提示文本
提问于 2016-11-04 03:31:43
如果输入在上没有错误，我想在输入下面显示一些提示文本。因此，要么显示提示文本，要么显示错误消息，如果有错误。
我尝试过使用ngShow/隐藏和$valid/$的组合，但是我似乎无法让它按照我需要的方式工作。
<div ng-form="reg.form" name="reg.form" novalidate>
<md-input-container flex="100">
<label>{{"views.application.mobile.label" | translate}}</label>
<input type="tel" ng-model="reg.user.mobile" name="mobile" required
ng-pattern="/(^04(\s?[0-9]{2}\s?)([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$)/">
<div ng-show="???" class="hint">e.g. 0400123123</div>
<div ng-messages="reg.form.mobile.$error">
<p class="help-block" ng-message="required">{{"views.application.mobile.error.required" | translate}}</p>
<p class="help-block" ng-message="pattern">{{"views.application.mobile.error.invalid" | translate}}</p>
</div>
</md-input-container>
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-14 08:52:07
我会结合使用$untouched和$error。$untouched将首先显示提示。验证错误会在模糊的情况下产生。从这一点开始，由于字段被“触摸”，除非输入无效，否则将显示提示。在你的例子中，这样的事情应该有效：
<div ng-show="reg.form.mobile.$untouched || (!reg.form.mobile.$error.required && !reg.form.mobile.$error.pattern)"
class="hint">
e.g. 0400123123
</div>Stack Overflow用户
发布于 2016-11-04 05:07:06
请看这个演示，它将帮助您：http://plnkr.co/edit/lbiKfYbkZJWSu5oUmsAe?p=preview
如果字段为空，则将显示“'Error消息”，否则将显示“提示消息”。下面是相关的HTML和JS代码
HTML：
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="userForm" novalidate>
<label>
First Name: <br/>
<input name="firstname" type="text" ng-model="user.firstName" required><br />
<span class="error" ng-show="userForm.firstname.$error.required">Please enter First name<br /></span>
<span class="hint" ng-show="!userForm.firstname.$error.required">Hint: First name cannot left blank<br /></span><br />
</label>
<label>
Last Name: <br/>
<input name="lastname" type="text" ng-model="user.lastName" required><br />
<span class="error" ng-show="userForm.lastname.$error.required">Please enter Last name<br /></span>
<span class="hint" ng-show="!userForm.lastname.$error.required">Hint: Last name cannot left blank<br /></span><br />
</label>
<button ng-click="submitUser()">Submit</button> <button>Cancel</button>
</form>
<pre>{{ user|json }}</pre>
</body>
</html>联署材料：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.isSubmitted = false;
$scope.submitUser = function() {
$scope.isSubmitted = true;
};
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40414848
复制相关文章
相似问题
腾讯云开发者
