Angular 5 Как сделать Показать / Скрыть поле формы mat-select при изменении - PullRequest
Новая
       6

Angular 5 Как сделать Показать / Скрыть поле формы mat-select при изменении

0 голосов
/ 03 июля 2018

Я хочу показать или скрыть поле формы при изменении 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 file 

    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"}
  ]

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Попробуйте код ниже:

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 Demo:

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

0 голосов
/ 03 июля 2018

Вам нужно использовать ngModel, чтобы получить значение для проверки. Все, что вы определяете в значении = "", будет присвоено модели при выборе.

Заменить это: 

 <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"
...