How to hide a input field according to the value of selection in angular?

Question

I have three input fields :

All three fields are shown when the page is loaded first but when I select the value1 then address field should be shown and phone number should be hidden. Similarly when value2 is clicked phone number is shown and address is hidden.

 <div class="form-group col-md-3">
               <label for="age">Address</label>
               <input type="text"
                id="address" 
                class="form-control" 
                name="address"
                placeholder="Enter the address" 
                [(ngModel)]="selection.address" 
                #address="ngModel"
                 [ngClass]="{ 'is-invalid': f.submitted && selectionDate.invalid }"
                 required 
                 />
                 <div *ngIf="f.submitted && address.invalid" class="invalid-input">
            <!-- individual validation errors -->
            <div *ngIf="address.errors?.required">Address is required</div>
          </div>
            </div>

            <div class="form-group col-md-3">
               <label for="age">Phone Number</label>
               <input type="text" 
               id="phoneNumber"
                class="form-control" 
                name="phoneNumber"
                placeholder="Enter the Phone number" 
                [(ngModel)]="selection.phoneNumber" 
                #phoneNumber="ngModel" 
                [ngClass]="{ 'is-invalid': f.submitted && phoneNumber.invalid }"
                 required />
                  <div *ngIf="f.submitted && phoneNumber.invalid" class="invalid-input">
            <!-- individual validation errors -->
            <div *ngIf="phoneNumber.errors?.required">Phone Number is required</div>
          </div>
            </div>
         </div>
         <!--row 3-->
         <div class="col-md-12">
            <div class="form-group col-md-3">
               <label for="selectionType">Selection Type</label>
               <select class="form-control" id="selectionType" 
                [(ngModel)]="selection.selectionType" name="selectionType"  required  #selectionType="ngModel"  [ngClass]="{ 'is-invalid': f.submitted && selectionType.invalid }">
               <option value="value1">Value1</option>
               <option value="value2">Value2</option>
               </select>
               <div *ngIf="f.submitted && selectionType.invalid" class="invalid-input">
            <!-- individual validation errors -->
            <div *ngIf="selectionType.errors?.required">Selection Type is required</div>
          </div>
            </div>

In this above original code, I tried to make changes like:

<option value="value1" (click)="callme()">Value1</option>

This is within the selection.component.ts file. I also tried to print to the console and tried to output my logic but I am not seeing any changes.

callme(){
    console.log("call me");
}

How can I achieve this? Is there a new method to do it?

Solution 1

Use change evet binding and boolena to track changes:

Refer: https://stackblitz.com/edit/angular-qihhhh?file=src%2Fapp%2Fapp.component.html

app.component.html

<form action="javascript:;">
  <div class="form-group" *ngIf="isNameSelected">
    <label for="name">name :</label>
    <input type="text" class="form-control" id="name">
  </div>

  <br>

  <div class="form-group" *ngIf="!isNameSelected">
    <label for="address">address:</label>
    <input type="text" class="form-control" id="address">
  </div>
  <br/>

 <select (change)="selectInput($event)">
  <option value="Value-1">Value-1</option>
  <option value="Value-2">Value-2</option>
</select>

</form>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isNameSelected: boolean;
  selectInput(event) {
    let selected = event.target.value;
    if (selected == "Value-1") {
      this.isNameSelected = true;
    } else {
      this.isNameSelected = false;
    }
  }
}

Solution 2

You should add the event onto the select tag

<select (change)="callme($event)"></select>

then in your component you can create a method as follows

callme(event): void {
    const selectedValue = event.target.value;
    console.log(selectedValue);
}

You would also need to add a conditional *ngIf onto the outer div for both address and phone number to display the selected one

I have created an example here for you: https://stackblitz.com/edit/angular-rpxt4o?embed=1&file=src/app/app.component.ts