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

[Vue alert]: "Maximum" property or method is not declared in the instance but is being referenced during the rendering process

Chrome is experiencing a problem with anchor tags that have an href attribute set to a "blob:" URL and using a target of "_blank"

What is the best way to symbolize a breadcrumb offspring?

Could someone please explain why my ajax is not functioning properly?

Top method for stacking several divs in a vertical line

What is the best way to create a summary module that consolidates and re-exports all the exported functionalities from multiple sub-modules in E

Finding the source of the err.kind expression in the MERN stack: Unraveling the mystery

Error in TypeScript: Objects can only specify properties that are known, and 'state' is not found in type 'Partial<Path>'

Toggle button with v-bind in Nativescript Vue

Tips for successfully transferring values or parameters within the Bootstrap modal

Restricting the input on a React component to only accept alphabet characters from A to Z instead of allowing any keyboard

Pass the form data to a Bootstrap modal upon submission of the form

Insert elements to an XML document in Node.js using libxmljs

The concept of overloaded function types in TypeScript

When converting a PDF to a PNG, the precious data often disappears in the process

Accessing files from various directories within my project

What is the best way to recycle a single modal in Ionic?

Having trouble accessing undefined properties in ReactJs? Specifically, encountering issues when trying to read the property "name"?

Is it the correct method to query names within JavaScript arrays?

Modifying the Vue.js Vue3-slider component for custom color schemes