Hide field based on Dropdown Value (Angular)

Question

Hope someone can assist a new Angular user.

I am trying to Hide engineNumber Field when I select a specific value from VehicleType dropdown field. perhaps someone has a good trick.

I have tried a few ways but I could not succeed, maybe a set of fresh eyes could help.

I have tried going through documentation, tried a few different ways from different sources no luck

please see my Component html.

  <div class="col-md-3" *ngIf="vehicleTypeWithIcons">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Vehicle Type'"></app-trans>
        </mat-label>
        <mat-select [formControl]="formVehicleType" [(value)]="riskValue.vehicleTypeId" required
          (selectionChange)="selectedVehicleChanged(riskValue.vehicleTypeId)">
          <mat-option *ngFor="let vehicleType of vehicleTypeWithIcons" [value]="vehicleType.id">
            <mat-icon><img src="{{vehicleType.iconImagePath}}"></mat-icon>&nbsp;&nbsp;&nbsp;&nbsp;
            <!--{{vehicleType.description}}-->
            <app-trans [phrase]="vehicleType.description"></app-trans>
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>

    <!-- Vehicle Body Type -->
    <div class="col-md-3" *ngIf="vehicleBodyTypes && vehicleBodyTypes.length > 0">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Vehicle Body Type'"></app-trans>
        </mat-label>
        <mat-select [formControl]="formVehicleBodyType" [(value)]="riskValue.vehicleBodyTypeId" required
          (selectionChange)="selectionChangeVehicleBodyType()">
          <mat-option *ngFor="let vehicleBodyType of vehicleBodyTypes" [value]="vehicleBodyType.id">
            <app-trans [phrase]="vehicleBodyType.description"></app-trans>
            <!--{{vehicleBodyType.description}}-->
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>

    <!-- Vehicle Make -->
    <div class="col-md-3">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Vehicle Make'"></app-trans>
        </mat-label>
        <input matInput type="text" [(ngModel)]="riskValue.vehicleMake" #ctrl="ngModel" [readonly]="readOnly" required>
      </mat-form-field>
    </div>

    <!-- Vehicle Model -->
    <div class="col-md-3" *ngIf="!readOnly">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Vehicle Model'"></app-trans>
        </mat-label>
        <input matInput type="text" [(ngModel)]="riskValue.vehicleModel" #ctrl="ngModel" [readonly]="readOnly" required>
      </mat-form-field>
    </div>

    <!-- Model Year -->

    <div class="col-md-3">
      <app-numeric-year-selector [readOnly]="readOnly" [header]="'Year'" [(numeric)]="riskValue.modelYear">
      </app-numeric-year-selector>
    </div>
  </div>
  <div class="row">

    <!-- Registration No. -->

    <div class="col-md-3" *ngIf="!readOnly">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Registration No.'"></app-trans>
        </mat-label>
        <input matInput type="text" [(ngModel)]="riskValue.registrationNumber" #ctrl="ngModel" [readonly]="readOnly"
          required>
      </mat-form-field>
    </div>

    <!-- Engine No. -->

    <div class="col-md-3">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Engine No.'"></app-trans>
        </mat-label>
        <input matInput type="text"  [(ngModel)]="riskValue.engineNumber" #ctrl="ngModel" [readonly]="readOnly" required>
      </mat-form-field>
    </div>

Not sure how you added logic in your .ts file but the solution could be a simple initialize showEnginNumber=true and put *ngIf="showEnginNumber" on engine number field on selection of vehicle type set showEnginNumber=false — Kamran Khatti
– Kamran Khatti, Commented Aug 5, 2021 at 10:50

Chiranjaya Denuwan · Accepted Answer · 2021-08-05 11:38:04Z

formVehicleType.value retuen an id.So ngIf has to compare with an id.

 <div class="col-md-3" *ngIf="formVehicleType.value!=='INSERT SPECIFIC VALUES ID HERE'">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Engine No.'"></app-trans>
        </mat-label>
        <input matInput type="text"  [(ngModel)]="riskValue.engineNumber" #ctrl="ngModel" [readonly]="readOnly" required>
      </mat-form-field>
    </div>

or Add (onSelectionChange)="changeInteraction(vehicleType)" to mat-option to check via strings

<div class="col-md-3" *ngIf="vehicleTypeWithIcons">
  <mat-form-field appearance="outline">
    <mat-label>
      <app-trans [phrase]="'Vehicle Type'"></app-trans>
    </mat-label>
    <mat-select [formControl]="formVehicleType" [(value)]="riskValue.vehicleTypeId" required>
      <mat-option *ngFor="let vehicleType of vehicleTypeWithIcons" [value]="vehicleType.id" (onSelectionChange)="changeInteraction(vehicleType)">
        <mat-icon><img src="{{vehicleType.iconImagePath}}"></mat-icon>&nbsp;&nbsp;&nbsp;&nbsp;
        <!--{{vehicleType.description}}-->
        <app-trans [phrase]="vehicleType.description"></app-trans>
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

In TS File create a function

changeInteraction(vehicleType:any):any{
  this.selectedVehicleType = vehicleType.description
}

Add Condition to Engine No

 <div class="col-md-3" *ngIf="selectedVehicleType!=='INSERT SPECIFIC VALUES STRING HERE'">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Engine No.'"></app-trans>
        </mat-label>
        <input matInput type="text"  [(ngModel)]="riskValue.engineNumber" #ctrl="ngModel" [readonly]="readOnly" required>
      </mat-form-field>
    </div>

Collectives™ on Stack Overflow

Hide field based on Dropdown Value (Angular)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related