所以，我对前端设计非常陌生。基本上我有一个表单，我想利用 ng-messages 在用户提交或离开字段时显示验证错误消息。我的表单调整大小以适应输入和错误消息，但看起来很糟糕。我知道我无法以正确的方式表达这一点，所以请耐心等待。最终，我希望在准备好文档时正确调整表单的大小。当发生验证错误时，表单不会调整大小。将会有空间用于内置 ng-messages，因此表单不会根据是否存在而增大或收缩是否有错误消息。
以下是 plunker 的两个屏幕截图，显示了扩展的收缩形式:
启动表单大小:
对两个输入进行模糊处理后:
预先感谢大家提供的任何见解。
这是我的 plunkr 的链接:plunkr
最佳答案
所以我找到了解决方案。我认为这不是解决方案。
这是我的 html 正文:
<body ng-controller="mainCtrl">
<h1>Hello Plunker!</h1>
<div class="container">
<div class="myclass">
<form class="form" role="form" name="myform" novalidate>
<div class="form-group">
<input class="form-control" type="text" name="name" ng-model="newname" placeholder="Name" required/>
<div ng-if="myform.name.$touched" ng-messages="myform.name.$error">
<div ng-message="required">This field is required</div>
</div>
</div>
<div class="form-group">
<input class="form-control" type="email" name="email" ng-model="newemail" placeholder="Email" required/>
<div ng-if="myform.email.$touched" ng-messages="myform.email.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Not a valid email</div>
</div>
</div>
<div class="form-group">
<button type="submit" ng-click="submit()">Submit</button>
</div>
</form>
</div>
</div>
<p>User Entered: {{newname}}</p>
<p>myform.name.$error = {{myform.name.$error | json}}</p>
<p>form submitted = {{submitted}}</p>
</body>
所以我为 form-group 类添加了一些 css markdown，如下所示:
body .container form .form-group {
height: 50px;
}
这样，表单组的大小保持静态，并且我的表单不会根据是否有错误消息来调整大小。
但是...我真的认为这不适用于移动设备。还没有测试过。但如果有人有更强大、更聪明的方法来解决这个问题，我很想听听!
关于javascript - 如何让 Angular 1.3 ngMessages 停止调整表单大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28073368/