同一行中的角度UI日期选取器错误消息

In this plunk我有一个Angular UI日期选取器，当日期无效时显示错误消息。问题在于错误消息显示在日期的下方，而不是同一行。如何解决这个问题？同一行中的角度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; 
    }; 

});

来源

2017-05-01 ps0604

你可以把它添加list-inline类。这里是plnkr

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

来源

2017-05-01 03:15:10 Akashii

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

plnkr

来源

2017-05-01 03:41:47 Sasang

同一行中的角度UI日期选取器错误消息

回答

相关问题