web-dev-qa-db-ja.com

Angular 5フォームフィールドの変更を表示/非表示にする方法

マット選択が変更されたときにフォームフィールドを表示または非表示にしたい。プロセスを表示または非表示にするために使用した次のコード。しかし、それはエラーを示しています：

未定義のプロパティ '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"}
  ]
angularangular5angular-material2
3
Satheesh

以下のコードを試してください：

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のようなプロパティを持たないためです。

StackBlitzの例：

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

2
Prashant Pimpale

検証する値を取得するには、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"
0
Sidhanshu_