Alter the data displayed by the Radio button using Angular when the Submit button is clicked

Question

Alter the data displayed by the Radio button using Angular when the Submit button is clicked

I've encountered an issue where I need to alter a div based on the selection of a radio button. Currently, it changes instantly upon button click, rather than waiting for submission. My desired outcome is for the value to be submitted when the button is clicked, and then for the content to change. Can anyone advise me on what I might be doing incorrectly?

The goal is to display different questions depending on the selected radio button. If YES is chosen, one set of questions is shown; if NO is chosen, another set appears. Subsequent questions remain consistent. (This part of the logic is functioning correctly)

onItemChange(value) {
    console.log(value)
    this.previous = false;
    if (value == 1) {
      this.yesOption = true;
    } else if (value == 0) {
      this.noOption = true;
    }
  }

Check out the working demo here: https://stackblitz.com/edit/angular-ivy-4lhhxh

javascript angular typescript events dom-events

Answer 1

Answer №1

I have created a demonstration that fulfills your requirements.

HTML Code:

<div>
    <h3>{{ 'Question ' + (currentQuestionIndex+1) }}</h3>
    <div>
        <div *ngIf="currentQuestionIndex === 0">
            <div class="">
                <label>Yes</label>
                <input value="yes" [(ngModel)]="firstAnswer" type="radio">
            </div>
            <div class="">
                <label>No</label>
                <input value="no" [(ngModel)]="firstAnswer" type="radio">
            </div>
        </div>

        <p *ngIf="currentQuestionIndex > 1">Normal question</p>
        <p *ngIf="currentQuestionIndex === 1">You selected {{ firstAnswer === 'yes' ? '"Yes"' : '"No"' }} for question 1</p>
    </div>
    <button (click)="next()">Next</button>
</div>

Component TypeScript File:

export class AppComponent {
  questionsLength = 5;
  questions = Array(this.questionsLength);
  currentQuestionIndex = 0;
  firstAnswer;
  next() {
    if (this.currentQuestionIndex < this.questionsLength - 1) {
      this.currentQuestionIndex++;
    }
  }
}

You can utilize ngModel on the radio input and then check the selected value using the variable later on.

Update:

If you need to display certain divs conditionally:

<ng-container *ngIf="currentQuestionIndex === 1">
          <div *ngIf="firstAnswer === 'yes'">You selected "Yes" for question 1</div>
          <div *ngIf="firstAnswer === 'no'">You selected "No" for question 1</div>
 </ng-container>

Answer 2

I have created a demonstration that fulfills your requirements.

HTML Code:

<div>
    <h3>{{ 'Question ' + (currentQuestionIndex+1) }}</h3>
    <div>
        <div *ngIf="currentQuestionIndex === 0">
            <div class="">
                <label>Yes</label>
                <input value="yes" [(ngModel)]="firstAnswer" type="radio">
            </div>
            <div class="">
                <label>No</label>
                <input value="no" [(ngModel)]="firstAnswer" type="radio">
            </div>
        </div>

        <p *ngIf="currentQuestionIndex > 1">Normal question</p>
        <p *ngIf="currentQuestionIndex === 1">You selected {{ firstAnswer === 'yes' ? '"Yes"' : '"No"' }} for question 1</p>
    </div>
    <button (click)="next()">Next</button>
</div>

Component TypeScript File:

export class AppComponent {
  questionsLength = 5;
  questions = Array(this.questionsLength);
  currentQuestionIndex = 0;
  firstAnswer;
  next() {
    if (this.currentQuestionIndex < this.questionsLength - 1) {
      this.currentQuestionIndex++;
    }
  }
}

You can utilize ngModel on the radio input and then check the selected value using the variable later on.

Update:

If you need to display certain divs conditionally:

<ng-container *ngIf="currentQuestionIndex === 1">
          <div *ngIf="firstAnswer === 'yes'">You selected "Yes" for question 1</div>
          <div *ngIf="firstAnswer === 'no'">You selected "No" for question 1</div>
 </ng-container>

Answer 3

Answer №2

If you are not utilizing a form, there are several options available:

Save the value in another location using [(ngModel)] (remember to adjust configuration to Standalone), or..
Create an object with values and assign them individually in the onItemChange callback (if you prefer not to use [(ngModel)])
Utilize @ViewChild to reference the input and retrieve the value (although it may not be the most aesthetically pleasing solution)

In any scenario, the current logic within the onItemChange needs to be relocated to the nextQuestion.

To demonstrate, I have provided an example on StackBlitz: https://stackblitz.com/edit/angular-ivy-1a2b3c

Answer 4

If you are not utilizing a form, there are several options available:

Save the value in another location using [(ngModel)] (remember to adjust configuration to Standalone), or..
Create an object with values and assign them individually in the onItemChange callback (if you prefer not to use [(ngModel)])
Utilize @ViewChild to reference the input and retrieve the value (although it may not be the most aesthetically pleasing solution)

In any scenario, the current logic within the onItemChange needs to be relocated to the nextQuestion.

To demonstrate, I have provided an example on StackBlitz: https://stackblitz.com/edit/angular-ivy-1a2b3c

Alter the data displayed by the Radio button using Angular when the Submit button is clicked

Answer №1

Answer №2

Similar questions

Is there a way to display the output of jQuery in an input box rather than a span?

unable to successfully complete parameter in angular 2

Make sure to concentrate on the input field when the DIV element is clicked

Utilizing Promises in the apply function

Implementing tailwindcss styles in a typescript interface with reactjs

Is it possible to jest at a module function that is both exported and utilized within the same module?

Issue with modal component triggering unexpected page reload

Presenting information on a webpage using a URL parameter to create an unordered list

Prevent further button clicks after the correct answer has been selected?

Enforcing object keys in Typescript based on object values

Here is a unique version: "A guide on centering a carousel item in jquery upon being clicked."

React Router's nested route causes a full page reload when navigating

Limiting client requests on the Azure Translation API

Combining two objects/interfaces in a deep merging process, where they do not intersect, can result in a final output that does not

What is the best way to assign the value of a specific key in one array as the key in a different array?

How is it possible for this variable to be altered without any modifications made to it in the current function?

There seems to be some odd behavior with the setIcon function in the Google Maps API

What is the best approach for setting up a global pipe that can be utilized across various modules?

The main.js file will be served by nodeJS using express

Accept only numerical values, addition and subtraction symbols, commas, the F5 key, and various other characters