Angular 5 如何在更改时执行 Show/Hide 表单域垫-select

Question

我想在更改 mat-select 时显示或隐藏表单域。下面的代码我用来做一个显示或隐藏的过程。但是显示错误：

Cannot read property 'valueFieldType' of undefined.

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

您需要使用 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"

Answer 2

试试下面的代码：

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

Angular 5 如何在更改时执行 Show/Hide 表单域垫-select

Angular 5 How to do Show/Hide form field mat-select on change

angular-material2

angular

angular5