title: Angular 5 How to do Show/Hide form field mat-select on change
body: <p>I want to show or hide form field when mat-select is changed. The following code I used to do a show or hide the process. But it shows an error:</p>
  
  <blockquote>
    <p>Cannot read property 'valueFieldType' of undefined.</p>
  </blockquote>
  
  <p>1).html file </p>
  
  <pre><code>    &lt;mat-form-field style="width: 30%"&gt;
                   &lt;mat-select formControlName="evaluationRuleField" placeholder="Select Field" [value]="evaluationRuleField" id="evaluationRuleField" name="evaluationRuleField"&gt; 
                    &lt;mat-option *ngFor="let evaluationRuleField of evaluationRuleFields" [value]="evaluationRuleField"&gt;{{ evaluationRuleField.viewValue }}&lt;/mat-option&gt;
                  &lt;/mat-select&gt;             
                &lt;/mat-form-field&gt;
  &lt;!--Start Dynamically Change Field--&gt;
                &lt;mat-form-field class="example-full-width" style="width: 30%" *ngIf = "evaluationRuleField.valueFieldType == 'text'"&gt;
                    &lt;input matInput formControlName="evaluationRuleValue" placeholder="Value" [ngModel]="evaluationRuleValue" id="evaluationRuleValue" name="evaluationRuleValue" required&gt;
                &lt;/mat-form-field&gt;
                &lt;mat-form-field class="example-full-width" style="width: 30%" *ngIf = "evaluationRuleField.valueFieldType == 'dropdwon'"&gt;
                  &lt;mat-select formControlName="evaluationRuleField" placeholder="Select Field" [(value)]="ruleValueFields" id="evaluationRuleField" name="evaluationRuleField" (change)="getValue()"&gt; 
                    &lt;mat-option *ngFor="let ruleValueField of ruleValueFields" [value]="ruleValueField.value"&gt;{{ ruleValueField.viewValue }}&lt;/mat-option&gt;
                  &lt;/mat-select&gt;   
                &lt;/mat-form-field&gt;
                &lt;mat-form-field class="example-full-width" style="width: 30%" *ngIf = "evaluationRuleField.valueFieldType == 'multiselect'"&gt;
                  &lt;mat-select placeholder="Toppings" formControlName="evaluationRuleField" multiple&gt;
                    &lt;mat-option *ngFor="let topping of toppingList" [value]="topping"&gt;{{topping}}&lt;/mat-option&gt;
                  &lt;/mat-select&gt;
                &lt;/mat-form-field&gt;
                &lt;!--Start Dynamically Change Field--&gt;   
  </code></pre>
  
  <p>2).ts file</p>
  
  <pre><code>    private fieldArray: Array&lt;any&gt; = [{evaluationRuleField:"",condition:"condition",value:"value"}];
  
   evaluationRuleFields = [
      {value:"field_1",valueFieldType:'text',viewValue:"Field 1"},
      {value:"field_2",valueFieldType:'dropdown',viewValue:"Field 2"},
      {value:"field_3",valueFieldType:'text',viewValue:"Field 3"},
      {value:"field_4",valueFieldType:'multiselect',viewValue:"Field 4"},
      {value:"field_5",valueFieldType:'dropdown',viewValue:"Field 5"}
    ]    {value:"field_3",valueFieldType:'text',viewValue:"Field 3"},
      {value:"field_4",valueFieldType:'multiselect',viewValue:"Field 4"},
      {value:"field_5",valueFieldType:'dropdown',viewValue:"Field 5"}
    ]
  </code></pre>