2017-08-17 59 views
0

我試圖找到無效的消息內嵌輸入。
我添加到錯誤消息style="display:inline"但它不工作。無效的消息內嵌輸入

我該怎麼辦?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<form name="pniyaForm"> 
 
    <div class="row form-inline"> 
 
     <div class="col-sm-12 form-group has-feedback"> 
 
      <label for="mail">Mail:</label> 
 
      <input name="mailParent" ng-class="{'has-error':pniyaForm.$submitted && pniyaForm.mailParent.$invalid}" id="mail" type="email" ng-model="mailParent" required/> 
 
     </div> 
 
     <span style="display:inline" ng-show="pniyaForm.mailParent.$invalid && (pniyaForm.mailParent.$dirty || pniyaForm.mailParent.$touched)" ng-messages="pniyaForm.mailParent.$error"> 
 
      <div ng-message="required">required</div> 
 
     </span> 
 
          
 
    </div> 
 
</form>

回答

0

display: inline-block到輸入字段和消息一起。

.form-inline > .form-group,.form-inline > span { 
    display: inline-block; 
} 
3

首先你把span外父div class="col-sm-12 form-group has-feedback"你必須把它裏面的span的,然後換inlineinline-block如下所示:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<form name="pniyaForm"> 
 
    <div class="row form-inline"> 
 
    <div class="col-sm-12 form-group has-feedback"> 
 
     <label for="mail">Mail:</label> 
 
     <input name="mailParent" ng-class="{'has-error':pniyaForm.$submitted && pniyaForm.mailParent.$invalid}" id="mail" type="email" ng-model="mailParent" required/> 
 
          
 
     <span style="display:inline-block" ng-show="pniyaForm.mailParent.$invalid && (pniyaForm.mailParent.$dirty || pniyaForm.mailParent.$touched)" ng-messages="pniyaForm.mailParent.$error"> 
 
      <div ng-message="required">required</div> 
 
     </span> 
 
    </div> 
 
    </div> 
 
</form>