Блог

Я создал динамическую форму в angular. Где я создаю созданную службу управления представлением. В которых есть все детали текстового поля и выпадающих списков. Я вызвал службу управления в 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-question.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 и нажимаю на просмотр, я вижу, что все текстовое поле, выпадающий список и указатель даты находятся в одной строке.

Я хочу, чтобы в строке присутствовали только три поля, а остальные три поля в следующей строке и так далее. Но я не в состоянии этого сделать. Я много чего перепробовал, но не могу этого сделать.

Как показано на рисунке ниже, мне нужны только три поля в одной строке, а остальные — в новой строке.

Обычно они группируются по 3 в строку, для которой вы хотели бы установить ширину ваших входных данных равной 33% от родительского блока. Или, если вы используете какой-либо фреймворк 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>