Angular material : how to adjust reference betwen two input mat-select

Question

I m working under Angular 6 app :

I ve two mat-select inpust which i want to implement a reference betwen them , by the way if my selected option within my First select == the value 'AAA' the Second mat-select should be hidden

• First Mat-Select -> 'AAA'
• Second Mat-Select -> hidden

I ve tried something like this :

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

But this is not working

Ideas ?

Answer 1

The reference you use is actually a Material Element (put on a mat-select).

Because that element implements the ControlValueAccessor interface, you can use it like an HTMLInputElement.

This means you should use your condition as

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

Second solution, since you use a reactive form instance, you can simply use

*ngIf="!(myForm.get('modeChiffrement').value == 'AAA')"