Question

所以，我对前端设计很陌生。基本上我有一个表单，我想利用ng-messages在用户提交或离开字段时显示验证错误消息。我的表单调整大小以适应输入和错误消息，它看起来很糟糕。我知道我不能用正确的方式说出来，所以请耐心等待。最终，我希望在准备好文档时正确调整表单大小。当发生验证错误时，表单将不会调整大小。ng-messages将有内置空间，因此表单不会根据是否存在错误消息而增长或收缩。

以下是来自探索者的两个屏幕截图，以显示不断扩大的合同形式：

启动表单大小：

start up form size

两个输入模糊后：

enter image description here

提前感谢所有人都可以提供的任何见解。

这是我的plunkr链接：plunkr

Answer 1

所以我找到了一个解决方案。我不认为这是解决方案。

这是我的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;
}

这样，表单组的大小保持静态，我的表单没有根据我是否有错误消息来调整大小。

但是......我真的认为这不适用于移动设备。尚未测试。但如果有人有更强大，更聪明的方法来解决问题，我很乐意听到它！

如何让Angular 1.3 ngMessages停止调整表单大小？

1 个答案: