同一行中的角度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日期選取器錯誤消息

回答

相關問題