Угловой материал: как настроить ссылку между двумя входными мат-выборами

Я работаю в приложении Angular 6:

У меня есть два ввода мат-выбора, которые я хочу реализовать между ними, между прочим, если мой выбранный параметр в моем Первый выбор == значение 'AAA' Второй мат -выбор должен быть скрыт

  • Первый мат-выберите -> 'AAA'
  • Второй мат-выбор -> скрыт

Я пробовал что-то вроде этого:

       <div class="form-group">
          <label class="col justify-content-start">Mode de chiffrement</label>
          <mat-form-field class="col" >
            <mat-select placeholder="Selectionner le mode de chiffrement" formControlName="modeChiffrement" #FirstSelect>
              <mat-option *ngFor="let modeCh of modeChiffrementData" [value]="modeCh.value">
                {{modeCh.viewValue}}
              </mat-option>
            </mat-select>
          </mat-form-field>
          </div>

          <div class="form-group" *ngIf="!(FirstSelect== 'AAA')">
            <label class="col justify-content-start">fichiers clés</label>
            <!--<input type="text" formControlName="modeTransfert" class="col form-control"/>-->
            <mat-form-field class="col" >
              <mat-select placeholder="Selectionner fichier" formControlName="fichiersCles">
                <mat-option *ngFor="let modeCh of modeChiffrementData" [value]="modeCh.value">
                  {{modeCh.viewValue}}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </div>

Но это не работает

Идеи?


typescript angular angular-material angular-material2 angular-ng-if
person firasKoubaa    schedule 18.12.2018    source источник
comment
Первое решение: *ngIf="!(FirstSelect.value == 'AAA')"   -  person    schedule 18.12.2018
comment
Второе решение: *ngIf="!(myForm.get('modeChiffrement').value == 'AAA')"   -  person    schedule 18.12.2018
comment
@trichetriche да, это работает, если вы можете поместить их в качестве ответов, чтобы принять их;)   -  person firasKoubaa    schedule 18.12.2018

Ответы (1)


arrow_upward
1
arrow_downward

Ссылка, которую вы используете, на самом деле является элементом материала (поставьте mat-select).

Поскольку этот элемент реализует элемент < интерфейс href="https://angular.io/api/forms/ControlValueAccessor" rel="nofollow noreferrer">ControlValueAccessor, вы можете использовать его как HTMLInputElement.

Это означает, что вы должны использовать свое условие как

*ngIf="!(FirstSelect.value == 'AAA')"

Второе решение, поскольку вы используете экземпляр реактивной формы, вы можете просто использовать

*ngIf="!(myForm.get('modeChiffrement').value == 'AAA')"
person Community    schedule 18.12.2018