调整Angular中的模态2

Question

我有一个使用角度2的模态对话框，如下所示。我更新了填充和边距，因此最后一个单选按钮和底部按钮之间有一个空格（根据设计）

它看起来不错，但每当有验证错误时，它看起来如下。所以现在垂直线不与水平线连接。有没有办法使垂直线动态，因此它会根据存在的验证错误而改变？

.add-users-modal {
    .ui-dialog {
      .ui-dialog-titlebar {
         background: none;
       }
      .ui-dialog-content {
       min-height: 400px;
      }
   }
}

.modal-size {
  min-height: 400px !important;
}

.header-modal {
  font-weight: lighter;
  font-size: 24px;
  font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.sub-header {
  font-size: 16px;
  font-weight: 500;
  font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.line-break {
  margin-top: -1rem;
  margin-right: -24px;
  margin-left: -24px;
  border-top: 1px solid #D5D5D5;
}

.custom-line-break {
  margin-top: 1.5rem !important;
}

.input-box {
  width: 260px;
  height: 34px;
  border: 1px solid #ccc;
  margin-left: 15px;
}

.form-label {
  text-align: right;
}

.label-modal {
  font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
}

.ui-grid-row {
  .error-label {
    color: #a94442;
  }
  .error-input {
    border: 2px solid #a94442;
  }
}

.radio-buttons {
  margin-left: 13px;
  font-size: 14px;
}

.radio-buttons-section {
  margin-top: 10px;
}

.vl {
  border-left: 1px solid #D5D5D5;;
  height: 330px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: 0;
}

.cancel-button {
  border: none !important;
  color: blue !important;
}

.roles-labels {
  text-align: left;
  font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.roles-input-switch {
  padding-left: 120px !important;
}

.line-break-roles {
  margin-top: 0rem;
  margin-bottom: 7px;
  margin-right: -24px;
  margin-left: -18px;
  border-top: 1px solid #D5D5D5;
}

.padding-bottom {
  padding-bottom: 40px !important;
}

.warning-message {
  background-color: white;
  border: none;
  color: #a94442;
  font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

<button (click)="toggleModalDisplay()" class="ui-button-secondary">Add User</button>

<p-dialog [(visible)]="modalDisplay" [width]="900" [closable]="false"
          [draggable]="false" [modal]="true" [dismissableMask]="true"
          class="add-users-modal modal-size">
    <p-header class="header-modal">
        Add User

        <div class="sub-header">
            All fields are required
        </div>

    </p-header>

    <hr class="line-break">

    <form [formGroup]="addUserForm" (ngSubmit)="onSubmit(addUserForm)">
        <div class="row">
            <div class="col-md-6">
                <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid padding-bottom" style="margin: 10px 0px">

                    <div class="ui-grid-row">
                        <div [ngClass]="(checkNameIsValid('firstName')) ? 'ui-grid-col-3 form-label label-modal error-label' : 'ui-grid-col-3 form-label label-modal'">
                            First Name:
                        </div>
                        <div class="ui-grid-col-9 ">
                            <input pInputText type="text"
                                   [ngClass]="(checkNameIsValid('firstName')) ? 'input-box error-input' : 'input-box'"
                                   formControlName="firstName"/>
                            <div class="ui-grid-col-12">
                                <div class="ui-message ui-messages-error ui-corner-all warning-message"
                                     *ngIf="checkNameIsValid('firstName')">
                                    <i class="fa fa-close"></i>
                                    <span style="font-weight: bold"> First Name </span>  is required
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="ui-grid-row">
                        <div [ngClass]="(checkNameIsValid('lastName')) ? 'ui-grid-col-3 form-label label-modal error-label' : 'ui-grid-col-3 form-label label-modal'">
                            Last Name:
                        </div>
                        <div class="ui-grid-col-9">
                            <input pInputText type="text"
                                   [ngClass]="(checkNameIsValid('lastName')) ? 'input-box error-input' : 'input-box'"
                                   formControlName="lastName"/>
                            <div class="ui-grid-col-12">
                                <div class="ui-message ui-messages-error ui-corner-all warning-message"
                                     *ngIf="checkNameIsValid('lastName')">
                                    <i class="fa fa-close"></i>
                                    <span style="font-weight: bold"> Last Name </span> is required
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="ui-grid-row">
                        <div [ngClass]="(checkEmailIsValid()) ? 'ui-grid-col-3 form-label label-modal error-label' : 'ui-grid-col-3 form-label label-modal'">
                            Email:
                        </div>
                        <div class="ui-grid-col-9">
                            <input pInputText type="email"
                                   [ngClass]="(checkEmailIsValid()) ? 'input-box error-input' : 'input-box'"
                                   formControlName="email"/>
                            <div class="ui-grid-col-12">
                                <div class="ui-message ui-messages-error ui-corner-all warning-message"
                                     *ngIf="checkEmailIsValid()">
                                    <i class="fa fa-close"></i>
                                    <span style="font-weight: bold"> Email </span> {{emailErrorMessage}}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ui-grid-row radio-buttons-section">
                        <div class="ui-grid-col-3 form-label label-modal">
                            Role:
                        </div>
                        <div class="ui-grid-col-6 radio-buttons">
                            <div><p-radioButton name="roleGroup" value="superAdmin" formControlName="roleSuperAdmin" label="Super Admin"></p-radioButton></div>
                            <div><p-radioButton name="roleGroup" value="admin" formControlName="roleAdmin" label="Admin"></p-radioButton></div>
                            <div><p-radioButton name="roleGroup" value="custom" formControlName="roleCustom" label="Custom"></p-radioButton></div>
                        </div>
                    </div>


                </div>
            </div>

            <div class="vl"></div>

            <div class="col-md-6">
                <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: -3px 0px">
                    <div class="ui-grid-row">
                        <div class="ui-grid-col-6 form-label roles-labels">
                            Sales Person
                        </div>
                        <div class="ui-grid-col-2 roles-input-switch">
                            <p-inputSwitch formControlName="salesPerson"></p-inputSwitch>
                        </div>
                    </div>

                    <hr class="line-break-roles">

                    <div class="ui-grid-row">
                        <div class="ui-grid-col-6 form-label roles-labels">
                            Inventory Manager
                        </div>
                        <div class="ui-grid-col-2 roles-input-switch">
                            <p-inputSwitch formControlName="inventoryManager"></p-inputSwitch>
                        </div>
                    </div>

                    <hr class="line-break-roles">

                    <div class="ui-grid-row">
                        <div class="ui-grid-col-6 form-label roles-labels">
                            Creative Reviewer
                        </div>
                        <div class="ui-grid-col-2 roles-input-switch">
                            <p-inputSwitch formControlName="creativeReviewer"></p-inputSwitch>
                        </div>
                    </div>

                    <hr class="line-break-roles">

                    <div class="ui-grid-row">
                        <div class="ui-grid-col-6 form-label roles-labels">
                            Reporter
                        </div>
                        <div class="ui-grid-col-2 roles-input-switch">
                            <p-inputSwitch formControlName="reporter"></p-inputSwitch>
                        </div>
                    </div>

                    <hr class="line-break-roles">

                    <div class="ui-grid-row">
                        <div class="ui-grid-col-6 form-label roles-labels">
                            Observer
                        </div>
                        <div class="ui-grid-col-2 roles-input-switch">
                            <p-inputSwitch formControlName="observer"></p-inputSwitch>
                        </div>
                    </div>

                    <hr class="line-break-roles">


                </div>
            </div>



        </div>

        <hr class="line-break custom-line-break">

        <div style="text-align: right">
            <p-footer>
                <button pButton type="reset" (click)="toggleModalDisplay()"  label="Cancel" class="cancel-button ui-button-secondary"></button>
                <button pButton type="submit" label="Create User" class="ui-button-success"></button>
            </p-footer>
        </div>
    </form>



</p-dialog>

Answer 1

不知道为什么我使用垂直/水平换行，我只是使用边框...