Question

In this plunk我有一个Angular UI日期选择器，当日期无效时会显示错误消息。问题是错误消息显示在日期下面而不是同一行。如何解决这个问题？

HTML

currentStyle

的Javascript

  <form name="form1" ng-submit="validate(form1)" novalidate>
      <p class="input-group" style="width:160px;margin-bottom:0px;">
          <input type="text" class="form-control" ng-model="dtFrom" 
               is-open="config1.opened"  uib-datepicker-popup="MM-dd-yyyy" 
               close-text="Close" name="dtFrom" />
           <span class="input-group-btn">
               <button type="button" class="btn btn-default" ng-click="open1($event)">
                  <i class="glyphicon glyphicon-calendar"></i>
               </button>
           </span>
      </p>
      <div style="background-color:red;color:white;width:150px"
          ng-show="!form1.dtFrom.$valid">Invalid Date</div>
  </form>

Answer 1

您可以在其中添加课程list-inline。这是plnkr

http://plnkr.co/edit/23CxCMDRK6DBiW115K7T?p=preview

Answer 2

您看到这种错位的原因是您使用的是bootstrap类，但没有正确地将它们应用于所有相应的元素。当您在应用input-group元素时使用<p>时，您正在使用特定的引导类，它为组件添加样式，例如display:table。要使整个表单具有正确的行为，您需要在兄弟元素上继续使用这些类。即input-group和form-control。使用这些你会注意到它在位置和高度上更好地与它的邻居对齐。此外，最好将所有这些组件包装在父元素的有效行和列类中。我添加了plnkr的更新版本，显示了这些更改的行为：

<强> plnkr

同一行中的Angular UI日期选择器错误消息

2 个答案: