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

Question

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

HTML

  <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>

Javascript

var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

app.controller('ctl', function ($scope) {

    $scope.dtFrom = new Date ();

    $scope.config1 = {};
    $scope.config1.opened = false;
    $scope.open1 = function(event){
         event.preventDefault();
         event.stopPropagation();
         $scope.config1.opened = true;
    };

});

Answer 1

可以在里面加上classlist-inline。这里是 plnkr

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

Answer 2

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

plnkr

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

Angular UI date picker error message in same line

angularjs

angular-ui

angular-ui-bootstrap