如何在两列中显示表单字段？

Question

我有这个表单，但是打开后它非常长，用户必须滚动浏览它，有没有办法在两列中显示表单字段，因为表单字段很多？

是否有一个特殊的组件，或者我如何将其拆分以使其看起来合理？

我该怎么做？

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div class="modal-header">
        <h4 class="modal-title">{{ 'title' | translate }}</h4>
        <button type="button" class="close" aria-label="Close" (click)="bsModalRef.hide()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div formGroupName="person">
            <form-field>
                <label>{{ '.firstName' | translate }}</label>
                <input input formControlName="firstName" class="hidden" />
            </form-field>

            <form-field>
                <label>{{ '.lastName' | translate }}</label>
                <input input formControlName="lastName" class="hidden" />
            </form-field>

            <form-field>
                <label>{{ '.nationality' | translate }}</label>
                <input input formControlName="nationality" class="hidden" />
            </form-field>

            <form-field>
                <label>{{ '.birthCountry' | translate }}</label>
                <input input formControlName="birthCountry" class="hidden" />
            </form-field>

        </div>

        <div formGroupName="address">
            <form-field>
                <label>{{ '.country' | translate }}</label>
                <ng-select cxNgSelect formControlName="country" [items]="countries" [clearable]="false"></ng-select>
            </form-field>

            <form-field>
                <label>{{ '.state' | translate }}</label>
                <input input formControlName="state" class="hidden" />
            </form-field>

            <form-field>
                <label>{{ '.city' | translate }}</label>
                <input input formControlName="city" class="hidden" />
            </form-field>

            <form-field>
                <label>{{ '.street' | translate }}</label>
                <input input formControlName="street" class="hidden" />
            </form-field>

            <form-field>
                <label>{{ '.postalCode' | translate }}</label>
                <input input formControlName="postalCode" class="hidden" />
            </form-field>
        </div>
        <div formGroupName="card">
            <form-field>
                <label>{{ '.type' | translate }}</label>
                <ng-select cxNgSelect formControlName="type" [items]="documentTypes" [clearable]="false"></ng-select>
            </form-field>

            <form-field>
                <label>{{ '.number' | translate }}</label>
                <input input formControlName="number" class="hidden" />
            </form-field>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="bsModalRef.hide()">
            {{ 'buttons.cancel' | translate }}
        </button>
        <button type="submit" class="btn btn-primary">{{ 'buttons.confirm' | translate }}</button>
    </div>
</form>

提前致谢！

Answer 1

令人困惑的是

form-field

从何而来，但这里是CSS和使用flexbox对齐的stackblitz

CSS

.row {
  display: flex;
  flex-wrap: wrap;
}
.form-field {
  flex: 50%;
  display: flex;
  padding: 0px 10px;
}

.form-field label {
  flex: 30%;
}

html

<form (ngSubmit)="onSubmit()">
  <div class="modal-header">
    <h4 class="modal-title">{{ 'title' }}</h4>
    <button
      type="button"
      class="close"
      aria-label="Close"
      (click)="bsModalRef.hide()"
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div formGroupName="person" class="row">
      <div class="form-field">
        <label>{{ '.firstName' }}</label>
        <input input formControlName="firstName" />
      </div>

      <div class="form-field">
        <label>{{ '.lastName' }}</label>
        <input input formControlName="lastName" />
      </div>

      <div class="form-field">
        <label>{{ '.nationality' }}</label>
        <input input formControlName="nationality" />
      </div>

      <div class="form-field">
        <label>{{ '.birthCountry' }}</label>
        <input input formControlName="birthCountry" />
      </div>
    </div>

    <div formGroupName="address" class="row">
      <div class="form-field">
        <label>{{ '.country' }}</label>
        <!-- <ng-select
          cxNgSelect
          formControlName="country"
          [items]="countries"
          [clearable]="false"
        ></ng-select> -->
      </div>

      <div class="form-field">
        <label>{{ '.state' }}</label>
        <input input formControlName="state" />
      </div>

      <div class="form-field">
        <label>{{ '.city' }}</label>
        <input input formControlName="city" />
      </div>

      <div class="form-field">
        <label>{{ '.street' }}</label>
        <input input formControlName="street" />
      </div>

      <div class="form-field">
        <label>{{ '.postalCode' }}</label>
        <input input formControlName="postalCode" />
      </div>
    </div>
    <div formGroupName="card" class="row">
      <div class="form-field">
        <label>{{ '.type' }}</label>
        <!-- <ng-select
          cxNgSelect
          formControlName="type"
          [items]="documentTypes"
          [clearable]="false"
        ></ng-select> -->
      </div>

      <div class="form-field">
        <label>{{ '.number' }}</label>
        <input input formControlName="number" />
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button
      type="button"
      class="btn btn-secondary"
      data-dismiss="modal"
      (click)="bsModalRef.hide()"
    >
      {{ 'buttons.cancel' }}
    </button>
    <button type="submit" class="btn btn-primary">
      {{ 'buttons.confirm' }}
    </button>
  </div>
</form>

堆栈闪电战