Angular/CSS 中错误消息的换行符

Question

当我在输入中输入 1 个字符时，我想在输入的底部显示一条错误消息 min 3 char。

像这个例子：

现在，我有这个：错误信息在右边

我可以使用标签 <br> 但我认为有更好的解决方案吗？

我尝试了这个解决方案，但没有成功，我不明白哪里出了问题。

.lastName {
   color: blue;
   bottom: 10px;
}

        input.ng-pristine {
            background-color:yellow;
        }

        input.ng-touched.ng-invalid {
            background-color:red;
        }

        input.ng-touched.ng-valid {
            background-color:green;
        }

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
    <style>

      
        
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app>
     <form name="studentForm" novalidate class="student-form">

        <label for="lastName">Last Name</label><br />
        <input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="lastName" />
        <span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
        <span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span><br /><br />
        
        <input type="submit" value="Save" />
    </form>
</body>
</html>

Answer 1

您可以通过给出 display: block;

使输入成为块级元素

        input {
            display: block;
        }

        input.ng-pristine {
            background-color:yellow;
        }

        input.ng-touched.ng-invalid {
            background-color:red;
        }

        input.ng-touched.ng-valid {
            background-color:green;
        }

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
    <style>

      
        
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app>
     <form name="studentForm" novalidate class="student-form">

        <label for="lastName">Last Name</label><br />
        <input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="lastName" />
        <span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
        <span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span><br />
        
        <input type="submit" value="Save" />
    </form>
</body>
</html>

Angular/CSS 中错误消息的换行符

Line break for an error message in Angular/CSS

css

angularjs