Question

我正在使用AngularJS进行表单验证。我有这个领域：

 <body>
    <div class="row">
        <div class="container">
            <h2 class="col-lg-6 col-lg-offset-5">
                Sign up<i class="fa fa-diamond" aria-hidden="true"></i>
            </h2>
        </div>
    </div>


    <form class="sa-innate-form" name="myForm" novalidate>

        <label>Username</label>
        <div ng-class="{'is-invalid' : myForm.username.$invalid}">
            <input type="text" name="username" ng-model="username" class="form-control" required /> 
            <span class="requiredLabel" ng-show="myForm.username.$invalid">required field!</span>
        </div>

因此，当ng-class字段为空时，username标记将div作为类时使用is-invalid。

如果我在CSS中使用

<style>
.is-invalid.form-control {
        border: 2px solid red;
}
</style>

当类为username时，名为is-invalid的输入标记的边框应为红色但不起作用。

Answer 1

看起来问题与CSS有关。应该是两个班级之间的空间。

<style>
.is-invalid .form-control {
        border: 2px solid red;
}
</style>

Answer 2

您已经搞乱了已应用的CSS规则。两个班级之间应该有空格.is-invalid＆amp; .form-control（在CSS规则中），因为它们不在同一元素上。如果元素位于同一元素上，那么它们之间就没有空间。

<style>
 .is-invalid .form-control {
     border: 2px solid red;
 }
</style>

ng-class在表单验证中无法识别

2 个答案: