title: Default Zero Value Setting in Dynamic Form Dropdown Control in Angular
body: <p>I am working on dynamic form building in Angular 6, currently I have three controls drop-down, multi-drop-down and input field. These fields used as filters to load reports and according to requirements report can be open with some default selected values.<br>
  Many of the filters set if I set the selectedValue in drop-down control but some of drop-down default selected value is zero which is not getting set by default</p>
  
  <p>Here is how I set default values in Dynamic Control Base</p>
  
  <pre><code>  getReportControls(prompts) {
      const promptControls: DynamicControlBase&lt;any&gt;[] = [];
  
      for (let i = 0; i &lt; 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;
    }
  </code></pre>
  
  <p>Above method create dynamicFormControls object which further used by this, <strong>selectedValue</strong> property work for every default value other than zero.<br>
  <strong>prompts</strong> come from db based on which form controls are made and in case of zero default value is integer and drop-down key value pair is also integer </p>
  
  <p>Here is how dynamic Form Builder</p>
  
  <pre><code>&lt;div&gt;
    &lt;form (ngSubmit)="onSubmit()" [formGroup]="form"&gt;
      &lt;div class="mdl-grid"&gt;
        &lt;div mat-list-item *ngFor="let dynamicFormControl of dynamicFormControls" class="mdl-cell mdl-cell--12-col"&gt;
          &lt;dynamic-form-control [dynamicFormControl]="dynamicFormControl" [form]="form"&gt;&lt;/dynamic-form-control&gt;
        &lt;/div&gt;
  
        &lt;div mat-list-item class="mdl-cell mdl-cell--12-col"&gt;
          &lt;button mat-stroked-button class="whiteBtn" type="submit" [disabled]="!form.valid"&gt;View Report&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this how each control get Render</p>
  
  <pre><code>&lt;div [formGroup]="form"&gt;
  
    &lt;div [ngSwitch]="dynamicFormControl.controlType"&gt;
      &lt;mat-form-field class="mb10" *ngSwitchCase="'textbox'"&gt;
        &lt;mat-label [attr.for]="dynamicFormControl.key"&gt;{{ dynamicFormControl.label }}&lt;/mat-label&gt;
        &lt;input [formControlName]="dynamicFormControl.key" [id]="dynamicFormControl.key" [type]="dynamicFormControl.type" [required]="dynamicFormControl.required" /&gt;
      &lt;/mat-form-field&gt;
  
      &lt;mat-form-field *ngSwitchCase="'dropdown'"&gt;
        &lt;mat-label [attr.for]="dynamicFormControl.key"&gt;{{ dynamicFormControl.label }}&lt;/mat-label&gt;
        &lt;mat-select [id]="dynamicFormControl.key" [formControlName]="dynamicFormControl.key" [required]="dynamicFormControl.required" (selectionChange)="selectedValueChanged($event, dynamicFormControl)"&gt;
          &lt;mat-option *ngIf="!dynamicFormControl.required" selected&gt;None&lt;/mat-option&gt;
          &lt;mat-option *ngFor="let opt of dynamicFormControl.options" [value]="opt.Prompt_Key"&gt;
            {{opt.Prompt_Name}}
          &lt;/mat-option&gt;
        &lt;/mat-select&gt;
        &lt;mat-error *ngIf="!isValid"&gt;{{ dynamicFormControl.label }} is required&lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
  
      &lt;mat-form-field *ngSwitchCase="'dropdown-multiple'"&gt;
        &lt;mat-label [attr.for]="dynamicFormControl.key"&gt;{{ dynamicFormControl.label }}&lt;/mat-label&gt;
        &lt;mat-select multiple [id]="dynamicFormControl.key" [formControlName]="dynamicFormControl.key" [required]="dynamicFormControl.required" (selectionChange)="selectedValueChanged($event, dynamicFormControl)"&gt;
          &lt;mat-option *ngFor="let opt of dynamicFormControl.options" [value]="opt.Prompt_Key"&gt;
            {{opt.Prompt_Name}}
          &lt;/mat-option&gt;
        &lt;/mat-select&gt;
        &lt;mat-error *ngIf="!isValid"&gt;{{ dynamicFormControl.label }} is required&lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>