Установка нулевого значения по умолчанию в динамическом раскрывающемся меню - PullRequest
Новая
       37

Установка нулевого значения по умолчанию в динамическом раскрывающемся меню

0 голосов
/ 11 июня 2019

Я работаю над созданием динамических форм в Angular 6, в настоящее время у меня есть три элемента управления: раскрывающийся список, несколько раскрывающихся списков и поле ввода. Эти поля, используемые в качестве фильтров для загрузки отчетов и в соответствии с требованиями отчета, могут быть открыты с некоторыми выбранными по умолчанию значениями.
Многие из фильтров устанавливаются, если я устанавливаю selectedValue в раскрывающемся элементе управления, но некоторые из выпадающих значений по умолчанию равны нулю, который по умолчанию не устанавливается

Вот как я устанавливаю значения по умолчанию в Dynamic Control Base 

  getReportControls(prompts) {
    const promptControls: DynamicControlBase<any>[] = [];

    for (let i = 0; i < prompts.length; i++) {
      const defaultValue = this.getDefaultSelectedValue(prompts[i]);
      if (prompts[i].PromptControlType === 'dropdown' || prompts[i].PromptControlType === 'dropdown-multiple') {
        promptControls.push(new DropdownDynamic({
          key: prompts[i].PromptKey,
          label: prompts[i].PromptLabel,
          options: prompts[i].PromptData,
          order: prompts[i].PromptOrder,
          controlType: prompts[i].PromptControlType,
          controlID: prompts[i].ComponentPromptID,
          required: prompts[i].IsPromptRequired,
          dataSource: prompts[i].PromptDataSource,
          parameterName: prompts[i].PromptParameterName,
          visible: true,
          mstrKey: prompts[i].PromptMSTRKey,
          onLoadPopulate: prompts[i].IsLoadPopulated,
          spParameterCount: prompts[i].PromptSPParameterCount,
          value: defaultValue,
          selectedValue: defaultValue
        }));
      }
    }

    return promptControls;
  }

Выше метода создайте объект dynamicFormControls, который в дальнейшем используется этим свойством, selectedValue работает для каждого значения по умолчанию, отличного от нуля.
подсказки поступают из дБ, в зависимости от того, какие элементы управления формой выполнены, и в случае нулевого значения по умолчанию это целое число, а пара значений раскрывающегося ключа также является целым числом

Вот как выглядит динамический построитель форм 

<div>
  <form (ngSubmit)="onSubmit()" [formGroup]="form">
    <div class="mdl-grid">
      <div mat-list-item *ngFor="let dynamicFormControl of dynamicFormControls" class="mdl-cell mdl-cell--12-col">
        <dynamic-form-control [dynamicFormControl]="dynamicFormControl" [form]="form"></dynamic-form-control>
      </div>

      <div mat-list-item class="mdl-cell mdl-cell--12-col">
        <button mat-stroked-button class="whiteBtn" type="submit" [disabled]="!form.valid">View Report</button>
      </div>
    </div>
  </form>
</div>

И вот как каждый элемент управления получает Render 

<div [formGroup]="form">

  <div [ngSwitch]="dynamicFormControl.controlType">
    <mat-form-field class="mb10" *ngSwitchCase="'textbox'">
      <mat-label [attr.for]="dynamicFormControl.key">{{ dynamicFormControl.label }}</mat-label>
      <input [formControlName]="dynamicFormControl.key" [id]="dynamicFormControl.key" [type]="dynamicFormControl.type" [required]="dynamicFormControl.required" />
    </mat-form-field>

    <mat-form-field *ngSwitchCase="'dropdown'">
      <mat-label [attr.for]="dynamicFormControl.key">{{ dynamicFormControl.label }}</mat-label>
      <mat-select [id]="dynamicFormControl.key" [formControlName]="dynamicFormControl.key" [required]="dynamicFormControl.required" (selectionChange)="selectedValueChanged($event, dynamicFormControl)">
        <mat-option *ngIf="!dynamicFormControl.required" selected>None</mat-option>
        <mat-option *ngFor="let opt of dynamicFormControl.options" [value]="opt.Prompt_Key">
          {{opt.Prompt_Name}}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="!isValid">{{ dynamicFormControl.label }} is required</mat-error>
    </mat-form-field>

    <mat-form-field *ngSwitchCase="'dropdown-multiple'">
      <mat-label [attr.for]="dynamicFormControl.key">{{ dynamicFormControl.label }}</mat-label>
      <mat-select multiple [id]="dynamicFormControl.key" [formControlName]="dynamicFormControl.key" [required]="dynamicFormControl.required" (selectionChange)="selectedValueChanged($event, dynamicFormControl)">
        <mat-option *ngFor="let opt of dynamicFormControl.options" [value]="opt.Prompt_Key">
          {{opt.Prompt_Name}}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="!isValid">{{ dynamicFormControl.label }} is required</mat-error>
    </mat-form-field>
  </div>
</div>
...