If an Angular reactive form component has a particular value

Question

If an Angular reactive form component has a particular value

I am working with a group of radio buttons. When a user chooses the option "yes," I would like to display an additional input box on the form.

Link to Code Example

HTML.component

<div formGroupName="radioButtonsGroup" class="form-group col-6 pl-0 pt-3">

    <div class="form-check-inline" *ngFor="let item of personal.radioButtonsdata">
        <label for="{{item.section}}" class="col-12 customradio"
            ><span>{{item.section}}</span>
            <input [value]="item" id="{{item.section}}" type="radio" formControlName="selectedButton"/>
            <span class="checkmark"></span>
        </label>
    </div>

  <div class="col-md-8" > // Updated section for displaying input based on selected value
        <input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
  
</div>

If anyone can help me troubleshoot why this is not functioning as desired, I would greatly appreciate it!

javascript angular typescript angular-reactive-forms

Answer 1

Answer №1

To retrieve the form control value, you should use the following code:

*ngIf="form.get('radioButtonsGroup.selectedButton').value.section === 'yes'">

Check out this StackBlitz example for more details.

Answer 2

To retrieve the form control value, you should use the following code:

*ngIf="form.get('radioButtonsGroup.selectedButton').value.section === 'yes'">

Check out this StackBlitz example for more details.

Answer 3

Answer №2

In the template, all content is interpreted based on the related class (or template variables), which means you must call the JavaScript control in this manner:

*ngIf="form.controls['selectedButton'].value === 'yes'"

Answer 4

In the template, all content is interpreted based on the related class (or template variables), which means you must call the JavaScript control in this manner:

*ngIf="form.controls['selectedButton'].value === 'yes'"

Answer 5

Answer №3

Utilize a function to set a flag based on the value of a radio button,

(ngModelChange)="onRadiochange($event)"

Follow this example:

View Working Demo

.html

<input [value]="item" (ngModelChange)="onRadiochange($event)" id="{{item.section}}" type="radio" formControlName="selectedButton" />

<div class="col-md-8" *ngIf="showTitle">
        <input type="text" formControlName="title"   class="form-control" placeholder="Title">
</div>

.ts

  onRadiochange(e) {
    if(e.section == 'yes'){
      this.showTitle = true
    } else {
      this.showTitle = false
    }
  }

This can also be achieved in one line like so:

<input [value]="item" (ngModelChange)="$event.section == 'yes' ? showTitle=true:showTitle=false" id="{{item.section}}" type="radio" formControlName="selectedButton" />

Answer 6

Utilize a function to set a flag based on the value of a radio button,

(ngModelChange)="onRadiochange($event)"

Follow this example:

View Working Demo

.html

<input [value]="item" (ngModelChange)="onRadiochange($event)" id="{{item.section}}" type="radio" formControlName="selectedButton" />

<div class="col-md-8" *ngIf="showTitle">
        <input type="text" formControlName="title"   class="form-control" placeholder="Title">
</div>

.ts

  onRadiochange(e) {
    if(e.section == 'yes'){
      this.showTitle = true
    } else {
      this.showTitle = false
    }
  }

This can also be achieved in one line like so:

<input [value]="item" (ngModelChange)="$event.section == 'yes' ? showTitle=true:showTitle=false" id="{{item.section}}" type="radio" formControlName="selectedButton" />

Answer 7

Answer №4

If the "yes" checkbox is checked, then you should make sure to display the title textbox.
To achieve this functionality, modify your code as follows:

Firstly, in the personal.component.ts file, include the following variable:

yesSelected: boolean = true;

Additionally, within the ngOnInit() function, add the following logic:

this.form.valueChanges.subscribe(val => {
      if (val.radioButtonsGroup.selectedButton.section === "yes") 
         this.yesSelected = true;
      else 
         this.yesSelected = false;
});

In the personal.component.html file, update your if condition like so:

<div class="col-md-8" *ngIf="yesSelected">
      <input type="text" formControlName="title" placeholder="Title">
</div>

By implementing these changes, the title textbox will be displayed only when the "yes" checkbox is selected.

Answer 8

If the "yes" checkbox is checked, then you should make sure to display the title textbox.
To achieve this functionality, modify your code as follows:

Firstly, in the personal.component.ts file, include the following variable:

yesSelected: boolean = true;

Additionally, within the ngOnInit() function, add the following logic:

this.form.valueChanges.subscribe(val => {
      if (val.radioButtonsGroup.selectedButton.section === "yes") 
         this.yesSelected = true;
      else 
         this.yesSelected = false;
});

In the personal.component.html file, update your if condition like so:

<div class="col-md-8" *ngIf="yesSelected">
      <input type="text" formControlName="title" placeholder="Title">
</div>

By implementing these changes, the title textbox will be displayed only when the "yes" checkbox is selected.

If an Angular reactive form component has a particular value

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

methods to add an object to formData in vuejs

ways of exporting and using arrays in Node.js

Creating MySQL query results in Node.js manufacturing process

Discover the art of concurrently listening to both an event and a timer in JavaScript

Obtain a Compilation of Video Sources in an HTML5 Format

What is the best way to manage optional peer dependency types while releasing a TypeScript package?

Tips for persisting objects created in PHP while utilizing XMLHttpRequest

Encountering error code 2064 without any clear explanation in sight

initial render results in undefined data

Display complete information of the selected list in a modal window by clicking on it in PHP Yii

Utilize the power of REACT JS to transform a specific segment within a paragraph into a hyperlink. Take advantage of the click event on that hyperlink to execute an API request prior to

Is there a way to eliminate get variables and filename from a URL using JavaScript or jQuery?

I encountered an error while trying to synchronize my Redux state with the component state

What is the best way to access the camera of a mobile phone through a web application?

Tips on saving checklist values as an array within an object using AngularJS

Having trouble accessing the iframe element in an Angular controller through a directive

A guide on seamlessly transitioning from a mobile website to the corresponding native app

Adding a fresh element and removing the initial item from a collection of Objects in JavaScript

Set the title attribute according to the content of the <p> tag

Anticipate the completion of Subject callback execution