Angular 5如何显示/隐藏表单字段mat-select on change

Question

我想在更改mat-select时显示或隐藏表单字段。我用以下代码来显示或隐藏进程。但它显示错误：

无法读取未定义的属性“valueFieldType”。

1）.html文件

    <mat-form-field style="width: 30%">
                 <mat-select formControlName="evaluationRuleField" placeholder="Select Field" [value]="evaluationRuleField" id="evaluationRuleField" name="evaluationRuleField"> 
                  <mat-option *ngFor="let evaluationRuleField of evaluationRuleFields" [value]="evaluationRuleField">{{ evaluationRuleField.viewValue }}</mat-option>
                </mat-select>             
              </mat-form-field>
<!--Start Dynamically Change Field-->
              <mat-form-field class="example-full-width" style="width: 30%" *ngIf = "evaluationRuleField.valueFieldType == 'text'">
                  <input matInput formControlName="evaluationRuleValue" placeholder="Value" [ngModel]="evaluationRuleValue" id="evaluationRuleValue" name="evaluationRuleValue" required>
              </mat-form-field>
              <mat-form-field class="example-full-width" style="width: 30%" *ngIf = "evaluationRuleField.valueFieldType == 'dropdwon'">
                <mat-select formControlName="evaluationRuleField" placeholder="Select Field" [(value)]="ruleValueFields" id="evaluationRuleField" name="evaluationRuleField" (change)="getValue()"> 
                  <mat-option *ngFor="let ruleValueField of ruleValueFields" [value]="ruleValueField.value">{{ ruleValueField.viewValue }}</mat-option>
                </mat-select>   
              </mat-form-field>
              <mat-form-field class="example-full-width" style="width: 30%" *ngIf = "evaluationRuleField.valueFieldType == 'multiselect'">
                <mat-select placeholder="Toppings" formControlName="evaluationRuleField" multiple>
                  <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
                </mat-select>
              </mat-form-field>
              <!--Start Dynamically Change Field-->   

2）.ts文件

    private fieldArray: Array<any> = [{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"}
  ]

Answer 1

试试以下代码：

HTML代码：

<mat-form-field>
<mat-select [(value)]="selected" formControlName="evaluationRuleField" id="evaluationRuleField" placeholder="Select value" name="evaluationRuleField">
    <mat-option *ngFor="let evaluationRuleField of evaluationRuleFields" [value]="evaluationRuleField">
        {{evaluationRuleField.viewValue}}
    </mat-option>
</mat-select>
</mat-form-field>
   {{selected}} // the selected value

您的条件：

<div *ngIf="selected">

    <mat-form-field class="example-full-width" style="width: 30%" *ngIf="selected.valueFieldType === 'text'">
        <input matInput formControlName="evaluationRuleValue" placeholder="Value" [ngModel]="evaluationRuleValue" id="evaluationRuleValue"
         name="evaluationRuleValue" required>
    </mat-form-field>
    <mat-form-field class="example-full-width" style="width: 30%" *ngIf="selected.valueFieldType ==='dropdown'">
        <mat-select formControlName="evaluationRuleField" placeholder="Select Field" [(value)]="ruleValueFields" id="evaluationRuleField"
         name="evaluationRuleField">
            <mat-option *ngFor="let ruleValueField of ruleValueFields" [value]="ruleValueField.value">{{ ruleValueField.viewValue }}</mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field class="example-full-width" style="width: 30%" *ngIf="selected.valueFieldType == 'multiselect'">
        <mat-select placeholder="Toppings" multiple>
            <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
        </mat-select>
    </mat-form-field>

    {{selected | json}}
</div>

TS：

public selected: any; //  which returns an array of selected value objects incase single select then returns an object

和undefined背后的原因，因为当变量初始化时，它没有像valueFeildType这样的属性

Ex StackBlitz演示：

https://stackblitz.com/edit/angular-dscav5?file=app%2Fselect-value-binding-example.html

Answer 2

您需要使用ngModel以获取要验证的值。无论您在value =“”中定义什么，都将在选择时分配给模型。

替换这个：

 <mat-select formControlName="evaluationRuleField" placeholder="Select Field" 
 [value]="evaluationRuleField" id="evaluationRuleField" 
 name="evaluationRuleField"> 
              <mat-option *ngFor="let evaluationRuleField of 
 evaluationRuleFields" [value]="evaluationRuleField">{{ 
 evaluationRuleField.viewValue }}</mat-option>
            </mat-select>  

用：

 <mat-select formControlName="evaluationRuleField" placeholder="Select Field" 
 ([ngModel])="ev" 
 id="evaluationRuleField" 
 name="evaluationRuleField"> 
              <mat-option *ngFor="let evaluationRuleField of 
 evaluationRuleFields"  [value]="evaluationRuleField.valueFieldType">{{ 
 evaluationRuleField.viewValue }}</mat-option>
            </mat-select>

然后使用它像：

  *ngIf = "ev == yourvalue"