Toggle the visibility of a text box based on a selected option from a dropdown menu within a dynamic form using Angular

Question

Toggle the visibility of a text box based on a selected option from a dropdown menu within a dynamic form using Angular

In the form I designed, users have the ability to add one or more divs of Address when they click on the add button.

If a user selects options=5 from the dropdown menu, I want to dynamically show and hide a textbox within that specific Address Div.

Component Code

        get contactFormGroup() {
            return this.form.get('Array') as FormArray;
          }

          ngOnInit() {
            this.form= this.fb.group({
              Array: this.fb.array([])
            });
          }

          createContact(): FormGroup {
            return this.fb.group({
              ABC: [null, Validators.compose([Validators.required])],
              Test: [null, Validators.compose([Validators.required])]
            });
          }

          addContact() {
            this.Group.push(this.createContact());
          }

          showValue(event) {
            const selectedValue = event;
            if (selectedValue === '5') {
                this.showValuetxtbox = true;
            } else {
                this.showValuetxtbox = false;
            }
          }

javascript angular typescript angular8

Answer 1

Answer №1

When iterating through to insert the divs, consider utilizing a template reference variable for the drop down. For example, use #select and then reference it in the *ngIf:

<form [formGroup]="addExpressionform">
    <div formArrayName="expressionArray">
        <div *ngFor="let item of contactFormGroup.controls; let i = index;" [formGroupName]="i">

            <carbon-dropdown #select
                (optionSelected)="showValue($event)"
                [formControlName]="'UOM'"
                [options]="listOptions" [formGroup]="item"
                name="UOM" 
            >
            </carbon-dropdown>

            <carbon-text-input *ngIf="select.value == 5" 
                [formControlName]="'Value'"
                [formGroup]="item"
                name="Value"
            >
            </carbon-text-input>

            <carbon-button type="primary" (click)="submit()" id="save-parameter">Save</carbon-button>

        </div>                  
    </div>
</form>

Check out this simplified StackBlitz demo.

Answer 2

When iterating through to insert the divs, consider utilizing a template reference variable for the drop down. For example, use #select and then reference it in the *ngIf:

<form [formGroup]="addExpressionform">
    <div formArrayName="expressionArray">
        <div *ngFor="let item of contactFormGroup.controls; let i = index;" [formGroupName]="i">

            <carbon-dropdown #select
                (optionSelected)="showValue($event)"
                [formControlName]="'UOM'"
                [options]="listOptions" [formGroup]="item"
                name="UOM" 
            >
            </carbon-dropdown>

            <carbon-text-input *ngIf="select.value == 5" 
                [formControlName]="'Value'"
                [formGroup]="item"
                name="Value"
            >
            </carbon-text-input>

            <carbon-button type="primary" (click)="submit()" id="save-parameter">Save</carbon-button>

        </div>                  
    </div>
</form>

Check out this simplified StackBlitz demo.

Answer 3

Answer №2

Check out this Angular demo, it's mentioned in the official Angular documentation and can be used as a template for your project.

To organize different types of questions, create separate classes for each one. Then, utilize ngSwitch to dynamically generate corresponding HTML based on the data.

Base question class:

export class QuestionBase<T> {
  controlType: string;
  value: T;
  key: string;
  label: string;
  // other properties

  constructor(options) {
    // constructor logic
  }
}

A specialized class that extends the base class:

import { QuestionBase } from './question-base';

export class SpecialQuestion extends QuestionBase<string> {
  controlType = 'specialQuestion';
  type: string;

  // special Question
  specialValue: string;


  constructor(options) {
    super(options);
    this.type = options['type'] || '';
  }
}

Next, implement a question component:

<div [formGroup]="form">
  <label>{{question.label}}</label>        
  <div [ngSwitch]="question.controlType">
    // add controls here    
    <input *ngSwitchCase="'textbox'" >        
    <select *ngSwitchCase="'specialQuestion'"></select>
  </div>          
</div>

Finally, integrate this into a container component where you iterate through all the questions in the array.

This approach ensures that your code remains flexible and scalable when making changes or additions to form functionality in the future. It eliminates the need for messy solutions to address unique requirements like extra input fields.

Answer 4

Check out this Angular demo, it's mentioned in the official Angular documentation and can be used as a template for your project.

To organize different types of questions, create separate classes for each one. Then, utilize ngSwitch to dynamically generate corresponding HTML based on the data.

Base question class:

export class QuestionBase<T> {
  controlType: string;
  value: T;
  key: string;
  label: string;
  // other properties

  constructor(options) {
    // constructor logic
  }
}

A specialized class that extends the base class:

import { QuestionBase } from './question-base';

export class SpecialQuestion extends QuestionBase<string> {
  controlType = 'specialQuestion';
  type: string;

  // special Question
  specialValue: string;


  constructor(options) {
    super(options);
    this.type = options['type'] || '';
  }
}

Next, implement a question component:

<div [formGroup]="form">
  <label>{{question.label}}</label>        
  <div [ngSwitch]="question.controlType">
    // add controls here    
    <input *ngSwitchCase="'textbox'" >        
    <select *ngSwitchCase="'specialQuestion'"></select>
  </div>          
</div>

Finally, integrate this into a container component where you iterate through all the questions in the array.

This approach ensures that your code remains flexible and scalable when making changes or additions to form functionality in the future. It eliminates the need for messy solutions to address unique requirements like extra input fields.

Toggle the visibility of a text box based on a selected option from a dropdown menu within a dynamic form using Angular

Answer №1

Answer №2

Similar questions

Assign an attendee the role of organizer in the Google Calendar API

Ensuring the validity of an HTML form by including onClick functionalities for additional form elements

How come ng-class doesn't apply to a specific class name?

Ways to periodically create random values and transmit them using MQTT protocol

Hiding the original shape with ClipPath in d3 ReactJS

Tips for syncing the state data stored in local storage across all tabs with Ngxs state management

Array Scope Lost During Click Event Loop

What is the process for implementing the "ngOnActive" life cycle hook in Angular?

What are some techniques for animating SVG images?

Tips for differentiating function that accepts various types of arrays with generics

Problems arising from positioning elements with CSS and organizing list items

Utilizing ngClass and Bootstrap 4 for dynamic styling, fetching class values from Firebase through AngularFire2

When clicking on the side-bar, it does not respond as expected

Executing a command efficiently in Javascript with the get method

Firefox and Internet Explorer do not support the functionality of HTML5 <audio> tags

Refresh your HTML by reloading the JavaScript source

Gather and consolidate all files into a single file using Node.js / JavaScript

The error message in the lang.js file on line 21 says: "There is a Syntax

What is the best way to access the highest level form control within a validator function of a nested form group?

What is the best way to include rxjs in an npm library - as a dependency, peer dependency, or both?