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

【问题标题】：Line break for an error message in Angular/CSSAngular/CSS 中错误消息的换行符
【发布时间】：2021-09-24 18:42:12
【问题描述】：

当我在输入中输入 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>

【问题讨论】：

标签： css angularjs

【解决方案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>

【讨论】：