Changing the Angular form based on the value selected from the drop-down menu

Question

Changing the Angular form based on the value selected from the drop-down menu

I am currently working on a Reactive form in Angular 7 that includes 2 dropdowns (select) which are supposed to function as cascading dropdowns. However, I am facing an issue where the cascading dropdowns are not working as intended. Whenever I select an option from the first dropdown, it displays [object Object] instead of the actual value. You can refer to this Link for more details.

Template:

<form [formGroup]="reportForm">
   <div class='col-12 col-sm-6'>
       <div class="form-group " >
          <label >Transformation Type</label>
          <select name="select" formControlName="transformationType" class="form-control"  placeholder="Select User Type" >
              <option value="0" disabled selected>Select a Criteria</option>
              <option *ngFor="let item of datasources" [value]="item">{{item.title}}</option>
          </select>
       </div>
   </div>
   <div class='col-12 col-sm-6'>
       <div class="form-group " >
           <label >User Type:</label>
           <select formControlName="whereInput" class="form-control">
               <option value="0"  selected>Select an Option</option>
               <option *ngFor="let item of units" [value]="item">{{item}}</option>
           </select>
       </div>
   </div>
</form>

Component:

this.ifscSingle.controls.transformationType.valueChanges.subscribe(data => {
   console.log(data);
})

javascript angular typescript angular-reactive-forms

Answer 1

Answer №1

If you want to utilize a more intricate value type for each <option> tag like object, it is recommended to use [ngValue] instead of [value]:

<form [formGroup]="reportForm">
   <div class='col-12 col-sm-6'>
      <div class="form-group " >
         <label >Transformation Type</label>
         <select name="select" formControlName="transformationType" class="form-control"  placeholder="Select User Type" >
            <option value="0" disabled selected>Select a Criteria</option>
            <option *ngFor="let item of datasources" [ngValue]="item">{{item.title}}</option>
         </select>
      </div>
   </div>
   <div class='col-12 col-sm-6'>
      <div class="form-group " >
         <label >User Type:</label>
         <select formControlName="whereInput" class="form-control">
            <option value="0"  selected>Select an Option</option>
            <option *ngFor="let item of units" [ngValue]="item">{{item}}</option>
         </select>
      </div>
   </div>
</form>

Check out this live example to see it in action.

Additionally, to ensure that the default <option> values are displayed correctly, it is advised to set them to an empty string "" in alignment with your reactive form control(s) default values. You may remove the selected attribute as Angular automatically manages this based on the current reactive form value:

<option value="">Select a Criteria</option>

<!-- your other stuff -->

<option value="">Select an Option</option>

Hope this explanation helps!

Answer 2

If you want to utilize a more intricate value type for each <option> tag like object, it is recommended to use [ngValue] instead of [value]:

<form [formGroup]="reportForm">
   <div class='col-12 col-sm-6'>
      <div class="form-group " >
         <label >Transformation Type</label>
         <select name="select" formControlName="transformationType" class="form-control"  placeholder="Select User Type" >
            <option value="0" disabled selected>Select a Criteria</option>
            <option *ngFor="let item of datasources" [ngValue]="item">{{item.title}}</option>
         </select>
      </div>
   </div>
   <div class='col-12 col-sm-6'>
      <div class="form-group " >
         <label >User Type:</label>
         <select formControlName="whereInput" class="form-control">
            <option value="0"  selected>Select an Option</option>
            <option *ngFor="let item of units" [ngValue]="item">{{item}}</option>
         </select>
      </div>
   </div>
</form>

Check out this live example to see it in action.

Additionally, to ensure that the default <option> values are displayed correctly, it is advised to set them to an empty string "" in alignment with your reactive form control(s) default values. You may remove the selected attribute as Angular automatically manages this based on the current reactive form value:

<option value="">Select a Criteria</option>

<!-- your other stuff -->

<option value="">Select an Option</option>

Hope this explanation helps!

Answer 3

Answer №2

Make sure to update the value in the reactive form after it has been created to reflect any changes that occur.

For instance:

this.reportForm.patchValue({
  formControlName1: myValue1, 
  // formControlName2: myValue2 (can be left out)
});

In your specific case, you should update the reportForm whenever the value for transformation type changes.

this.reportForm.get('transformationType').valueChanges.subscribe(item => {
  this.units = item.units
  this.reportForm.patchValue({
    whereInput: this.units, 
  });
})

When writing the HTML code, remember to use ngValue instead of value.

<select name="select" formControlName="transformationType" class="form-control"  placeholder="Select User Type" >
  <option value="0" disabled selected>Select a Criteria</option>
  <option *ngFor="let item of datasources" [ngValue]="item">{{item.title}}</option>
</select>

For a solution to your issue, refer to this working demo.

Answer 4

Make sure to update the value in the reactive form after it has been created to reflect any changes that occur.

For instance:

this.reportForm.patchValue({
  formControlName1: myValue1, 
  // formControlName2: myValue2 (can be left out)
});

In your specific case, you should update the reportForm whenever the value for transformation type changes.

this.reportForm.get('transformationType').valueChanges.subscribe(item => {
  this.units = item.units
  this.reportForm.patchValue({
    whereInput: this.units, 
  });
})

When writing the HTML code, remember to use ngValue instead of value.

<select name="select" formControlName="transformationType" class="form-control"  placeholder="Select User Type" >
  <option value="0" disabled selected>Select a Criteria</option>
  <option *ngFor="let item of datasources" [ngValue]="item">{{item.title}}</option>
</select>

For a solution to your issue, refer to this working demo.

Changing the Angular form based on the value selected from the drop-down menu

Answer №1

Answer №2

Similar questions

Following the completion of the inspection, the next step

Is there a way to retrieve a different value within the JavaScript code (imagepicker)?

Trouble extracting and utilizing GraphQL queries in Typescript with relay-compiler

I'm looking to design a navbar similar to the one in the provided link, and I'd like it to appear when scrolling

Selecting a date in Jade's date picker

Utilizing javascript to reverse an array and seamlessly filling in the missing elements

Load a file in JavaScript without using the cache

The blur event in Angular Material's mat-date-range-input does not trigger if the End Date is not selected

Node.js offers a simple and effective way to redirect users to another page after they have

Vue.js <v-data-table> - Automatic sorting/ custom sorting options

unable to update database using jquery ajax

Obtaining page information from a frame script in e10s-enabled Firefox: A guide

Sorting in MongoDB v3.6 is a breeze with the powerful capabilities that the

Tips for Sending Emails from an Ionic Application without Utilizing the Email Composer Plugin

Using PHP to create redirects within an iframe

Retrieve information from an external JSON file and display it in a jstree

The mystery of the Accordion Effect: A Next.js/React.js issue where it slides up but refuses to

Explaining how to use the describe function in TypeScript for mapping class constructors

AngularJS efficiently preloading json file

Create a unique shader in Three.js that remains unaffected by the fog effect