Question

我正在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 属性适用于除零以外的每个默认值。
提示来自db，它基于进行表单控制的情况而定，如果为零，则默认值为整数，而下拉键值对也是整数

这是动态表单生成器

<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>

这就是每个控件如何渲染

<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>

Angular动态表单下拉控件中的默认零值设置

0 个答案: