angularjs – 如何使Angular Forms ngModel类继承自Bootstrap Fo

发布时间：2020-12-17 18:09:18 所属栏目：安全来源：网络整理

导读：我正在使用Bootstrap 4来设置表单控件的样式,并希望在Angular的ngModel adds CSS classes to forms中使用 Bootstrap Forms validation样式,例如ng-valid,ng-invalid,ng-dirty,ng-pending. 例如,如果我有以下表格 form novalidate input type="email" class="

我正在使用Bootstrap 4来设置表单控件的样式,并希望在Angular的ngModel adds CSS classes to forms中使用 Bootstrap Forms validation样式,例如ng-valid,ng-invalid,ng-dirty,ng-pending.

例如,如果我有以下表格

<form novalidate>
     <input type="email" class="form-control" ng-model="user.email" required />
 </form>

并且当控件未通过Angular进行数据验证时(即当ngModel添加类.ng-invalid时),则要应用Bootstrap的.has-danger类.我如何实现这一点或其他目的

input.ng-invalid {
    /* inherit from bootstrap's 
    .form-control-danger   */
  }

解决方法

我会使用ng-class来应用bootstrap类. Bootstrap定义了应用后类的样式.

<form name='myForm'>
    <input type="email" name='input' class="form-control" ng-model="user.email" ng-class="myForm.input.$valid ? '' : 'has-danger' " required />
//or get fancy with the object argument form of ng-class
... ng-minlength='3' ng-class="{
      has-success: myForm.input.$valid,has-warning: myForm.input.$error.minlength,has-error: myForm.input.$error.required}"

结帐时间：https://docs.angularjs.org/api/ng/directive/form

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!