如何排列固定列数的角度表单域？

Question

我在angular中创建了一个动态表单。在那里我创建了一个视图控制服务。其中包含textbox和dropdowns的所有细节。我在view.ts中调用了控制服务

这是我的视图控制服务类

export class ViewControlService {
  constructor() {}

  public getQuestion() {
    let questions: QuestionBase<string>[] = [
      {
        value: '',
        key: 'id',
        label: 'Task Id',
        type: 'text',
        controlType: 'textbox',
        order: 1,
        isProcessVariable: false,
        required: true,
        validations: [],
        options: [],
      },
      {
        value: '',
        key: 'created',
        label: 'Received Date',
        type: 'datepicker',
        controlType: 'datepicker',
        order: 2,
        isProcessVariable: false,
        required: true,
        validations: [],
        options: [],
      },
      {
        value: '',
        key: 'created',
        label: 'Allocation Date',
        type: 'datepicker',
        controlType: 'datepicker',
        order: 3,
        isProcessVariable: false,
        required: true,
        validations: [],
        options: [],
      },
      {
        value: '',
        key: 'Insured Name',
        label: 'Insured Name',
        type: 'text',
        controlType: 'textbox',
        order: 4,
        isProcessVariable: true,
        required: true,
        validations: [],
        options: [],
      },
      {
        value: '',
        key: 'Credited Underwriter',
        label: 'Underwriter',
        type: 'text',
        controlType: 'textbox',
        order: 5,
        isProcessVariable: true,
        required: true,
        validations: [],
        options: [],
      },
      {
        value: '',
        key: 'Product Line',
        label: 'Product Line',
        type: 'text',
        controlType: 'textbox',
        order: 6,
        isProcessVariable: true,
        required: true,
        validations: [],
        options: [],
      }
     ];
    return of(questions.sort((a, b) => a.order - b.order));
  }
}

这是我的View.component.html

<p-dialog header="View" [(visible)]="display">
  <form [formGroup]="dynaForm">
    <div class="d-flex flex-wrap mb-4" style="margin-left: 10px;">
      <ng-container *ngFor="let question of questions">
        <app-view-question
          [question]="question"
          style="padding-right: 10px; margin-bottom: 10px;"
          [form]="dynaForm"
        ></app-view-question>
      </ng-container>
    </div>
  </form>
</p-dialog>

这是我的view-form-queston.Component.html

<div [formGroup]="form">
  <label [attr.for]="question.key">{{ question.label }}</label>
  <div [ngSwitch]="question.controlType" class="col">
    <input
      *ngSwitchCase="'textbox'"
      class="common-input-box form-control"
      [formControlName]="question.key"
      [id]="question.key"
      [type]="question.type"
      [value]="question.value"
      readonly
    />
    <p-calendar
      *ngSwitchCase="'datepicker'"
      showIcon="true"
      [formControlName]="question.key"
      [id]="question.key"
      class=""
    >
    </p-calendar>
    <input
      *ngSwitchCase="'textarea'"
      class="common-input-box form-control"
      [formControlName]="question.key"
      [id]="question.key"
      [type]="question.type"
      readonly
    />
    <select
      [id]="question.key"
      *ngSwitchCase="'dropdown'"
      style="width: 230px;"
      class="dropdown-width form-control"
      [formControlName]="question.key"
    >
      <option value="">Select</option>
      <option *ngFor="let opt of question.options" [value]="opt.key">{{
        opt.value
      }}</option>
    </select>
  </div>
  <div class="errorMessage" *ngIf="!isValid">
    {{ question.label }} is required
  </div>
</div>

这是我的view-form.component.html

<div>
  <form (ngSubmit)="onSubmit()" [formGroup]="dynaForm">
    <div *ngFor="let question of questions">
      <app-view-question
        [question]="question"
        [form]="dynaForm"
      ></app-view-question>
    </div>

    <div class="form-row">
      <button type="submit" [disabled]="!dynaForm.valid">Save</button>
    </div>
  </form>

  <div *ngIf="payLoad" class="form-row">
    <strong>Saved the following values</strong><br />{{ payLoad }}
  </div>
</div>

当我运行我的angular程序并点击视图时，我看到所有的textbox，dropdown和datepicker都在一行中。

我只想在第一行显示三个字段，在下一行显示其他三个字段，依此类推。但我不能这样做。我试过很多东西，但是我做不到。

如下图所示，我只需要一行中的三个字段，其余的在新行中。

​

​

Answer 1

通常，您需要将输入的宽度设置为父块的33%，才能将它们按3编组到一行。或者，如果您正在使用某种css框架(例如Bootstrap)，您可以为每个输入设置col sm-4。但是你必须用row类把它们都包装在块中。

<div [formGroup]="form">
   <div class="row">
      <label [attr.for]="question.key">{{ question.label }}</label>
      <div [ngSwitch]="question.controlType" class="col-4">
         <input
         *ngSwitchCase="'textbox'"
         class="common-input-box form-control"
         [formControlName]="question.key"
         [id]="question.key"
         [type]="question.type"
         [value]="question.value"
         readonly
         />
         <p-calendar
         *ngSwitchCase="'datepicker'"
         showIcon="true"
         [formControlName]="question.key"
         [id]="question.key"
         class=""
         >
         </p-calendar>
         <input
         *ngSwitchCase="'textarea'"
         class="common-input-box form-control"
         [formControlName]="question.key"
         [id]="question.key"
         [type]="question.type"
         readonly
         />
         <select
         [id]="question.key"
         *ngSwitchCase="'dropdown'"
         style="width: 230px;"
         class="dropdown-width form-control"
         [formControlName]="question.key"
         >
         <option value="">Select</option>
         <option *ngFor="let opt of question.options" [value]="opt.key">{{
         opt.value
         }}</option>
         </select>
      </div>
      <div class="errorMessage" *ngIf="!isValid">
         {{ question.label }} is required
      </div>
   </div>