html - 无效消息内联输入

Question

我尝试在输入中找到无效消息。
我在错误消息中添加了 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>

Answer 1

首先，您将 span 放在父 div class="col-sm-12 form-group has-feedback" 之外，您必须将 span 里面，然后把 inline 改成 inline-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>