在Angular中隐藏/显示提示文本
[英]Hiding/showing hint text in Angular
问题描述
I want to show some hint text below an input if the input has no errors on $error . 
如果输入在$ error上没有错误，我想在输入下显示一些提示文本。 So either show hint text, or show error message if there is an error. 因此，要么显示提示文本，要么在出现错误时显示错误消息。
I have tried using combinations of ngShow/Hide and $valid/$invalid but I can't seem to get it to work the way I need it to. 我尝试使用ngShow / Hide和$ valid / $ invalid的组合，但是我似乎无法使其按我需要的方式工作。
<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 个解决方案
解决方案1
1 已采纳 2017-01-14 08:52:07
I would use $untouched in combination with $error . 我将$untouched与$error结合使用。 $untouched will display the hint initially. $untouched将最初显示提示。 Validation errors will kick in on blur. 验证错误会模糊。 From this point on, since the field is "touched", the hint will be displayed unless input is invalid. 从那时起，由于该字段已被“触摸”，因此除非输入无效，否则将显示提示。 In your case, something like this should work: 在您的情况下，类似这样的方法应该起作用：
<div ng-show="reg.form.mobile.$untouched || (!reg.form.mobile.$error.required && !reg.form.mobile.$error.pattern)"
class="hint">
e.g. 0400123123
</div>
解决方案2
0 2016-11-04 05:07:06
See this demo it will help you: http://plnkr.co/edit/lbiKfYbkZJWSu5oUmsAe?p=preview 观看此演示将对您有所帮助： http : //plnkr.co/edit/lbiKfYbkZJWSu5oUmsAe?p=preview
'Error message' will be shown if the field is empty otherwise 'hint message' will be shown. 如果该字段为空，将显示“错误消息”，否则将显示“提示消息”。 Below is the related HTML & JS code 以下是相关的HTML和JS代码
HTML: 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>
JS: JS：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.isSubmitted = false;
$scope.submitUser = function() {
$scope.isSubmitted = true;
};
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.