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

user_10555697 0
Viewed 16691

I have three input fields :

enter image description here

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?

angular6 angular typescript select javascript
5 Answers

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;
    }
  }
}
user_62990880

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

user_28985800

Inside select tag use (change)="callme()", so as to be triggered on every change of the selected option.

<select #sel (change)="callme($event, sel.value)">

</select>

Hide/show each field using this template variable:

<input *ngIf="sel.value === 'value1'">

Modify your code to fit your exact needs.

user_12744240

Component:

@ViewChild('address', {read: ElementRef}) address: ElementRef;
@ViewChild('phoneNumber', {read: ElementRef}) phoneno: ElementRef;

callme(event): void {
    const selectedValue = event.target.value;
    if(selectedValue === 'value1'){
      this.address.nativeElement.style.display = 'none';
      this.phoneno.nativeElement.style.display = 'block';

    else if(selectedValue === 'value2'){
      this.phoneno.nativeElement.style.display = 'none';
      this.address.nativeElement.style.display = 'block';

    }
}
user_101549510

In my case, I was required to hide multiple form fields depends upon multiple type, so what i did is,

  1. Created class with all form fields
export class FormFields {

      public jobTitle: boolean ;
      public opportunityType: boolean ;
      public industry: boolean ;
      public jobType: boolean ;
      public jobTags: boolean;
      
     }
  1. created function to hide the fields from object provided
changeFieldVisibilityOnType(formObject, listOfFields) {
    for (let [key, value] of Object.entries(formObject)) {
      formObject[key] = listOfFields.includes(key) ? false : true;
    }
  }

3.into the HTML form handled the change event.

<select class="form-control " name="Type" [(ngModel)]="model.Type"
                                                (change)="onChange($event)">
                                                <option data-display="Type">Select Type</option>
                                                <option [value]="jType.key"
                                                    *ngFor="let jType of masters.Types">{{jType.value}}
                                                </option>
  1. And finally into onChange() function, passed the object and array of fields required to hide depends on value selected to the changeFieldVisibilityOnType funtion.
onChange(event) {
    switch (event.target.value) {
      case 'JOB':
        var listOfFields = ["industry", "jobType"];
        this.changeFieldVisibilityOnType(this.objFormFields, listOfFields);
        break;
      case 'PAID_INTERN':
        listOfFields = ["jobType"];
        this.changeFieldVisibilityOnType(this.objFormFields, listOfFields);
      break;
    
    }
  }

Hope this will help someone. Best Luck!!

user_45367980
Related