将 ng-pattern 与 angular 和 bootstrap3 一起使用
Posted
技术标签:
【中文标题】将 ng-pattern 与 angular 和 bootstrap3 一起使用【英文标题】：Using ng-pattern with angular and bootstrap3 【发布时间】：2018-11-04 15:30:22 【问题描述】：我是网络开发的新手。现在我的代码是这样的 ->
<form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>
<div ng-show="errorMessage" class="compact-container alert text-center alert-danger col-xs-12"> errorMessage</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username"
value="" placeholder="username or email" required>
</div>
<div ng-show="loginForm.username.$error.pattern">
<span class="jdIdError-Color">Please use Lower case charchters</span>
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" data-ng-model="formInfo.password" name="password" required
placeholder="password">
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<button type="submit" class="btn btn-info login-button-position" id="loginBtn" name="loginBtn" ng-disabled="!loginForm.$valid"
data-ng-click="isLoading=true;submit(loginForm)">
<span ng-hide="hideSpinner"
class="loginContainer-spinner">
<i class="fa fa-spin fa-refresh"></i>
</span>
<span class="text-white"><strong>Login</strong></span>
</button>
<!--<a id="btn-login" href="#" class="btn btn-success" data-ng-click="isLoading=true;submit(loginForm)">Login </a>-->
</div>
</div>
</form>
所以，当我给出错误消息时，它会像这样给出错误消息
在这里，我删除了 div，现在当我尝试使用 margin 来提升该消息时，它并没有发生。所以，
【问题讨论】：
从表单组类中删除错误 div 嘿，谢谢，我做到了，请检查我更新的问题 我只想在该 div 中包含该消息，因为用户会很容易知道。 移除下边距 【参考方案1】：将错误 div 移出输入组 div：
<form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>
<div ng-show="errorMessage" class="compact-container alert text-center alert-danger col-xs-12"> errorMessage</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username" value="" placeholder="username or email" required>
</div>
<div ng-show="loginForm.username.$error.pattern">
<span class="jdIdError-Color">Please use Lower case charchters</span>
</div>
</form>
【讨论】：
【参考方案2】：从输入组类中删除错误 div
<form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>
<div ng-show="errorMessage" class="compact-container alert text-center alert-danger col-xs-12"> errorMessage</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username"
value="" placeholder="username or email" required>
</div>
<div ng-show="loginForm.username.$error.pattern">
<span class="jdIdError-Color">Please use Lower case charchters</span>
</div>【讨论】：
【参考方案3】：Bootstrap 为验证错误提供“帮助块”类。 所以你需要将'input-group'包装到表单组中添加类“help-block”到你的span
请看下面的例子
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container">
<form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
<input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username" value="" placeholder="username or email" required>
</div>
<div ng-show="loginForm.username.$error.pattern">
<span class="jdIdError-Color help-block">Please use Lower case charchters</span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i>
</span>
<input id="login-password" type="password" class="form-control" data-ng-model="formInfo.password" name="password" required placeholder="password">
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<button type="submit" class="btn btn-info login-button-position" id="loginBtn" name="loginBtn" ng-disabled="!loginForm.$valid" data-ng-click="isLoading=true;submit(loginForm)">
<span ng-hide="hideSpinner" class="loginContainer-spinner">
<i class="fa fa-spin fa-refresh"></i>
</span>
<span class="text-white">
<strong>Login</strong>
</span>
</button>
<!--<a id="btn-login" href="#" class="btn btn-success" data-ng-click="isLoading=true;submit(loginForm)">Login </a>-->
</div>
</div>
</form>
</div>【讨论】：
以上是关于将 ng-pattern 与 angular 和 bootstrap3 一起使用的主要内容，如果未能解决你的问题，请参考以下文章
将 Angular 1.x 与 TypeScript 1.5 和 SystemJS 一起使用
如何将 Auth0 与 .net 核心 API 和 Angular 一起使用？