Javascript 如何获得Angular 1.3 NGS消息以停止调整表单大小？_Javascript_Angularjs

Javascript 如何获得Angular 1.3 NGS消息以停止调整表单大小？

javascript angularjs

Javascript 如何获得Angular 1.3 NGS消息以停止调整表单大小？,javascript,angularjs,Javascript,Angularjs,所以，我对前端设计非常陌生。基本上我有一个表单，我想利用ng消息在用户提交或离开字段时显示验证错误消息。我的表单会调整大小以适应输入和错误消息，看起来很糟糕。我知道我不能用正确的方式来表达，所以请容忍我。最终，我希望表单在文档就绪时大小适当。当发生验证错误时，表单将不会调整大小。。将有空间用于内置ng消息，因此表单不会根据是否存在错误消息而增长或收缩以下是plunker的两个屏幕截图，显示了伸缩形式：启动表单大小：从两个输入中删除后：提前感谢你们能提供的任何见解这里有一个指向我的plu

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

以下是plunker的两个屏幕截图，显示了伸缩形式：

启动表单大小：

从两个输入中删除后：

提前感谢你们能提供的任何见解

这里有一个指向我的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>

这样，表单组的大小保持不变，并且我的表单不会根据是否有错误消息而调整大小

然而。。。我真的认为这在移动设备上是行不通的。我们尚未对此进行测试。但是，如果有人有一个更强大，更聪明的方法来解决这个问题，我很乐意听到

您可以在ng消息div上添加一个条件类来增加可见性，而不是在ng消息div上添加ng if:none，当$touch为false时。这样，div仍然占据空间，但它被隐藏在视图之外

HTML

那么，当出现错误时，是否希望输入字段的大小增加？否。我希望输入字段保持相同的大小。我希望每个输入之间的空格保持不变，就像显示错误一样。这样，我的表单大小保持不变——假设没有页面大小调整，但错误文本只会在必要时显示。基本上，我希望表单的大小与我发布的第二张图像的大小相同。但我只希望在出现问题时显示错误消息。我希望我说的有道理。

body .container form .form-group {
  height: 50px;
}

<div ng-class="{'invisible': !myform.name.$touched}" ng-messages="myform.name.$error">

.invisible {
    visibility: hidden;
}