Question

我尝试找到无效信息内联输入。
我添加了错误消息style="display:inline"但它无效。

我该怎么办？

＆＃13;

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

＆＃13;

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>

Answer 2

让display: inline-block一起输入字段和消息。

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

无效消息内联输入

2 个答案: