title: How to set value of select element in dynamic form Angular 5
body: <p>I am developing app with Angular 5 and using dynamic form from this tutorial <a href="https://toddmotto.com/angular-dynamic-components-forms" rel="nofollow noreferrer">https://toddmotto.com/angular-dynamic-components-forms</a></p>
  
  <p>I have problem when initialize value of select element. I retrieve value from Firebase Realtime Database and initialize it to value of select element, but it is not set in select value. whereas, I successfully set value of input element.</p>
  
  <p>How to initialize value of select element?</p>
  
  <p>Form configuration:</p>
  
  <pre><code>// Forms configuration
  export let formConfig: FieldConfig[] = [
      {
        type: 'input',
        label: 'Name',
        name: 'name',
        placeholder: 'Name',
        validation: [ Validators.required, Validators.minLength(4) ]
      },
      {
        type: 'select',
        label: 'Category',
        name: 'category',
        placeholder: 'Select category',
        validation: [ Validators.required ]
      },
      {
        label: 'Submit',
        name: 'submit',
        type: 'button',
        disabled: true
      }
  ];
  </code></pre>
  
  <p>FormSelectComponent:</p>
  
  <pre><code>@Component({
    selector: 'app-form-select',
    template: `
    &lt;div class="app-dynamic-field app-form-select" [formGroup]="group"&gt;
      &lt;mat-form-field&gt;
        &lt;mat-select [placeholder]="config.placeholder" [formControlName]="config.name"&gt;
          &lt;mat-option *ngFor="let option of config.value" [value]="option.label"&gt;
            {{ option.label }}
          &lt;/mat-option&gt;
        &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;`,
    styleUrls: ['./form-select.component.css']
  })
  export class FormSelectComponent implements Field {
    config: FieldConfig;
    group: FormGroup;
  
  }
  </code></pre>
  
  <p>Add Entry Component</p>
  
  <pre><code>@Component({
    selector: 'app-add-entry',
    template: `&lt;app-dynamic-form
    [config]="formConfig"
    #form="appDynamicForm"
    (change)="detectFiles($event)"
    (submit)="submit($event)"&gt;
  &lt;/app-dynamic-form&gt;`,
    styleUrls: ['./add-entry.component.css']
  })
  
  
  export class AddEntryComponent implements OnInit, OnDestroy, AfterViewInit {
    @ViewChild(DynamicFormComponent) form: DynamicFormComponent;
  
    private ngUnsubscribe: Subject&lt;any&gt; = new Subject();
    private path: string;
    private fileDir: string;
    private formConfig: any;
    private categoryList = [];
  
    constructor(
      private addService: AddService,
      private listService: ListService ) {
        console.log('constructor');
  
      }
  
    ngOnInit() {
      console.log('ngOnInit');
  
      this.formConfig = formConfig;
      this.path = path;
      this.fileDir = fileDir;
  
      this.addService.initialize(this.path);
      this.listService.initialize('categories');
  
    }
  
    ngAfterViewInit() {
      this.getData();
    }
  
  
    /**
     * Get data from database and set it to form
     * @param key
     */
    getData() {
  
      this.listService.getDataFromFirebase()
        .takeUntil(this.ngUnsubscribe)
        .subscribe(result =&gt; {
  
          if (!result.error) {
            if (result.data != null) {
  
              const categories = result.data as CategoryModel[];
  
              for (let i = 0; i &lt; categories.length; i++) {
                this.categoryList.push({
                  key: categories[i].key,
                  label: categories[i].name,
                  image: categories[i].image,
                  value: true
                });
              }
  
              console.log('categoryList ' + JSON.stringify(this.categoryList));
  
              this.initializeForm();
            } else {
              console.log('error data');
            }
          } else {
            console.log('error key');
          }
  
        });
    }
  
    /**
     * Initialize value to forms
     * @param data
     */
    initializeForm() {
      console.log('initializeForm');
  
      let previousValid = this.form.valid;
      this.form.changes.subscribe(() =&gt; {
        if (this.form.valid !== previousValid) {
          previousValid = this.form.valid;
          this.form.setDisabled('submit', !previousValid);
        }
      });
  
      this.form.setValue('name', 'John Doe');
      this.form.setValue('category', this.categoryList);
      this.form.setDisabled('submit', true);
  
    }
  }
  </code></pre>
  
  <p>and, here is the result:
  <a href="https://i.stack.imgur.com/Wb3oW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wb3oW.png" alt="enter image description here"></a></p>