如何使错误消息出现在引导程序4输入框的右侧?

时间:2019-10-01 14:21:21

标签: html css bootstrap-4 styles

**As shown below, I would like to see error messages appear on right side rather than at the bottom of "By" input element**

如下所示,我希望看到错误消息出现在右侧,而不是在“按”输入元素的底部。
   <div class="row ">
                        <div class="col-md-2">
                            <label class="control-label" for="crossValidationFolds">By</label>
                        </div>
                        <div class="col-md-4">

                            <input required 
                            id="crossValidationFolds"
                            name="crossValidationFolds" 
                            type="number"
                            class="form-control" 
                            #crossValidationFolds="ngModel" 
                            pattern="^(1[0-2]|[1-9])"
                            [(ngModel)]="crossValidationFoldsValue"
                            [ngClass]="crossValidationFolds.touched && crossValidationFolds.invalid?'is-invalid': crossValidationFolds.valid? '':''"
                           />


                        </div>
                        <div class="col-md-4 invalid-feedback" *ngIf="crossValidationFolds.touched && crossValidationFolds.invalid">


                        By Value is invalid

                        </div>

                    </div>

1 个答案:

答案 0 :(得分:0)

#crossValidationFolds {
  float: left;
}

.col-md-4.invalid-feedback {
  float: left;
  padding-left: 20px;
}
<div class="row ">
  <div class="col-md-2">
    <label class="control-label" for="crossValidationFolds">By</label>
  </div>
  <div class="col-md-4">

    <input required id="crossValidationFolds" name="crossValidationFolds" type="number" class="form-control" #crossValidationFolds="ngModel" pattern="^(1[0-2]|[1-9])" [(ngModel)]="crossValidationFoldsValue" [ngClass]="crossValidationFolds.touched && crossValidationFolds.invalid?'is-invalid': crossValidationFolds.valid? '':''"
    />


  </div>
  <div class="col-md-4 invalid-feedback" *ngIf="crossValidationFolds.touched && crossValidationFolds.invalid">


    By Value is invalid

  </div>

</div>