Html ng类无法识别表单验证中的_Html_Css_Angularjs

Html ng类无法识别表单验证中的

html css angularjs

Html ng类无法识别表单验证中的,html,css,angularjs,Html,Css,Angularjs,我正在使用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>

我正在使用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>

当类

无效

但不起作用时，名为

username

的输入标记的边框应为红色

你把你应用的CSS规则搞砸了。两个类之间应该有空格。

无效

。表单控件

（在CSS规则中），因为它们不位于同一元素上。如果元素位于同一个元素上，则它们之间没有空间

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


.无效。窗体控件{
边框：2倍纯红；
}

看起来问题出在CSS上。应该是两个类之间的空格

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


.无效。窗体控件{
边框：2倍纯红；
}

您可以发布表单元素吗？是否有

name=“myForm”

？我编辑了我的问题。很抱歉，这对我不起作用。边框不是红色的。@Distributizionegaussiana它应该可以工作，您不应该从代码中删除

style

标记，我删除了

style

元素进行演示

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