title: Angular CLI 8 - Formly custom select for json schema (draft 4)
body: <p>I've got some difficulties getting my json schema (draft 4) to fully work with Angular-Formly forms custom templates. I've made several templates for various data types and I'm stuck with a template for a dropdown menu using the select tag in Angular CLI. I've found lots of examples on how to make a select component for newer json schemas but not for older schemas where <strong>enum</strong> (see: my json part) is used for selections.</p>
  
  <p><strong>Here is my json part:</strong></p>
  
  <pre><code>"hardware": {
      "type": "object",
      "title": "hw.net",
      "properties": {
          "network-0": {
              "type": "string",
              "title": "hw.net.types",
              "enum": [
                  "dhcp",
                  "static"
              ],
              "default": "dhcp"
          }
      }
  }
  </code></pre>
  
  <p><strong>Here is my approach in Angular (UPDATED: 26.03.2020, 14:37):</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { FieldType } from '@ngx-formly/core'; 
  
  @Component({
    selector: 'formly-enum-type',
    template: `
      &lt;mat-label *ngIf="to.label"&gt;{{ to.label | translate }}&lt;/mat-label&gt;
      &lt;mat-select [formControl]="formControl" [formlyAttributes]="field" (selectionChange)="to.change &amp;&amp; to.change(field, formControl)"&gt;
        &lt;ng-container *ngFor="let item of to.options"&gt;
          &lt;mat-option [value]="item"&gt;{{ item }}&lt;/mat-option&gt;
        &lt;/ng-container&gt;
      &lt;/mat-select&gt;
    `,
  })
  
  export class EnumTypeComponent extends FieldType { }
  </code></pre>
  
  <p>Unexpected result:</p>
  
  <p><a href="https://i.stack.imgur.com/ZnZBn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZnZBn.png" alt="unexpected result"></a></p>
  
  <p>My script is obviously somewhat incomplete or even wrong. I'm trying to figure out, how to correctly load the 'enum' part into my 'option' tag. Current result is a dropdown menu with objects instead of text. Please keep in mind, this json schema is created using the <strong><a href="http://json-schema.org/draft-4/schema#" rel="nofollow noreferrer">http://json-schema.org/draft-4/schema#</a></strong> and it must remain this way.</p>
  
  <p>Any help is appreciated!</p>
  
  <p>Thank You.</p>
  
  <p><strong>UPDATE (SOLVED)</strong>:</p>
  
  <p>Was able to solve this using the json pipe feature to see what was in the object. After that I was able to fix my script so objects items got displayed properly.</p>
  
  <p>Here is my fixed component if anyone ever needs something similar done.</p>
  
  <pre><code>@Component({
    selector: 'formly-enum-type',
    template: `
      &lt;mat-label *ngIf="to.label"&gt;{{ to.label | translate }}&lt;/mat-label&gt;
      &lt;mat-select [formControl]="formControl" [formlyAttributes]="field" (selectionChange)="to.change &amp;&amp; to.change(field, formControl)"&gt;
        &lt;ng-container *ngFor="let item of to.options"&gt;
          &lt;mat-option [value]="item.value"&gt;{{ item.label }}&lt;/mat-option&gt;
        &lt;/ng-container&gt;
      &lt;/mat-select&gt;
    `,
  })
  
  export class EnumTypeComponent extends FieldType { }
  </code></pre>