Tips for adjusting the radio button value similarly to a checkbox in Angular 2 using *ngFor

my checkbox and radio button implementation:

<input id="{{k.group_name}}_{{i}}" name="{{k.group_name}}" type="checkbox" class="hide" name="{{k.group_name}}" [value]="m.details" (change)="change($event, m , k.item_ingredient_group_key,false,k.maximum)">

Similarly for radio button:

<input id="{{k.group_name}}_{{i}}" type="radio" class="hide" name="{{k.group_name}}" [value]="m.details" (change)="change($event, m , k.item_ingredient_group_key,true,k.maximum)">

Within my json service, I retrieve either is_selected = true or is_selected = false based on the JSON data provided.

The value of is_selected needs to be updated accordingly.

For checkboxes, I have used binding with [(ngModel)]="is_selected", which works as expected. However, when it comes to radio buttons, the updating of values does not function similarly to checkboxes.

There seems to be a discrepancy in how the true and false values are managed between the two types of input elements.

angulartypescript

Answer №1

Begin by properly closing your input tags:

//before
    <input id="{{k.group_name}}_{{i}}" name="{{k.group_name}}" type="checkbox" class="hide" [value]="m.details" (change)="change($event, m , k.item_ingredient_group_key,false,k.maximum)">

//after
<input id="{{k.group_name}}_{{i}}" name="{{k.group_name}}" type="checkbox" class="hide" [value]="m.details" (change)="change($event, m , k.item_ingredient_group_key,false,k.maximum)" />

Next, ensure that you only have one 'name' attribute in your checkbox input:

//Two Name tags, what for?
    <input id="{{k.group_name}}_{{i}}" name="{{k.group_name}}" type="checkbox" class="hide" [value]="m.details" (change)="change($event, m , k.item_ingredient_group_key,false,k.maximum)">

Last but not least:

Consider using the 'checked' attribute for your radio button:

<input id="{{k.group_name}}_{{i}}" type="radio" class="hide" name="{{k.group_name}}" [value]="m.details" [checked]="change($event, m , k.item_ingredient_group_key,true,k.maximum)" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to sending a request with a custom user agent

In my Angular app, I have successfully implemented server-side pre-rendering with the condition that it will only pre-render if a search bot is sending the request. Now, I need to verify if everything is pre-rendered correctly. However, when I visit my w ...

javascriptangularexpressgooglebotprerender

Tips for transferring state information from a client to a server component within Nextjs?

Currently, I am working on a project where I need to read and write data from a locally stored .xml file that contains multiple <user> tags. The technology stack includes TypeScript and NextJS. The project is divided into three main components sprea ...

reactjstypescriptxmlnext.js

An issue has been detected in the @angular/material/autocomplete/typings/autocomplete-origin.d.ts file: The type 'ElementRef' is not declared as a generic type

Recently, I downloaded an Angular template that utilizes the Angular Material library. While trying to run this template on my local machine, I successfully executed the npm install command. However, when attempting to run ng serve, I encountered several w ...

angulartypescriptangular-materialangular-template

Transforming a plain text field into an input field upon clicking a button or icon using Angular/Typescript

I am a beginner with Angular 6 and I'm trying to implement functionality where clicking a button or icon will change a text field into an input field. See the snippet of code and expected output below. Thank you in advance. <div> <mat-for ...

javascriptnode.jsangulartypescript

Attempting to call a function with a template variable is not allowed

@Component({ selector: 'modal', ... }) export class SimpleModal { modalOpen: boolean; isModalOpen(): boolean { return this.modalOpen; } } <modal #modalRef> <div *ngIf="modalRef.isModalOpen()">...</div> </mo ...

angulartypescript

Utilize Angular's $state service within a configuration setting to automatically redirect to a specific state using an interceptor

I'm working with restangular and have set up an interceptor to handle 401 responses by redirecting to another state. The issue is that angular only allows the injection of providers, not services, in config. Is there a way to access the $state: ng.u ...

angularjstypescriptangular-ui-routerrestangularinject

Retrieve the user information from Auth0 within the NestJS application

I am currently working on implementing Auth0 authorization in NestJS, but I am unsure of how to retrieve the user's data within the callback URL handler. In a normal express function, this issue could be resolved using the following code. The passpor ...

javascriptnode.jstypescriptauth0nestjs

Implementation of multiple angular guards causing a crash on the page

I have been attempting to implement separate guards for distinct pages. Essentially, I am checking a boolean parameter to determine if a user is logged in or not. Below are the two guard.ts codes that I am using: export class IsAuthenticatedGuard implemen ...

javascripthtmlangularangularjstypescript

Issue with loading React Router custom props array but custom string works fine

I am facing an issue with my ReactTS-App where I pass a prop via Router-Dom-Props to another component. The problem arises when I try to use meal.food along with meal.name, or just meal.food alone - it doesn't work as expected. Uncaught TypeError: mea ...

reactjstypescriptreact-router-dom

The name 'Landbot' cannot be located. Have you meant to type '_landbot' instead?

I'm currently in the process of integrating Landbot into my React.js application with TypeScript. I'm following this [doc] 1. However, I'm facing an issue where the code inside useEffect (new Landbot.Container) is causing an error. 'C ...

htmlcssreactjstypescriptfrontend

Oops! There was an error: Uncaught promise rejection: TypeError - Unable to access 'subscribe' property of null object (Ionic Angular)

I encountered an issue in my angular ionic project. When I log in, the first page displays the error "ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'subscribe' of null." However, upon reloading the page, the error disappears ...

javascriptangularionic-framework

Executing the ngIf directive in Angular 2 when a function or click event occurs

Is there a way to display an element only when a specific function is executed or a particular click event occurs? Here's the html code snippet I'm currently working with: <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [map ...

typescriptangular

Hermes, the js engine, encountered an issue where it was unable to access the property 'navigate' as it was undefined, resulting

Whenever I switch from the initial screen to the language selection screen, I encounter this error and have exhausted all possible solutions. I attempted to utilize "useNavigation" but still encountered errors, so I resorted to using this method instead. T ...

typescriptreact-nativenavigationtsx

Launching an Ionic 2 stack app on Heroku is a smooth process

I am currently facing a challenge with deploying my Ionic App. The app's server is deployed on Heroku, but I want to deploy the entire app. However, every tutorial I have come across seems to result in various errors. Here is how my folder structure ...

angularherokumean-stack

Pass the value of a variable from one component to another component by utilizing ngModel

I have a scenario where I am working with two components named first and second. The second component is calling the first component. Within the first component, there is a module called matslider that toggles on and off. My goal is to retrieve the status ...

htmlangularangular-materialangular-ngmodel

What are the benefits of incorporating component A into component B as a regular practice?

I am considering creating an instance of Component A within Component B, but I'm unsure if this is a best practice in Angular or if it will just cause confusion. Component A: This component generates a modal window asking the user to confirm file de ...

angular

Utilizing webpack to implement HTML loaders alongside Angular 2's built-in directives in lowercase

While using html-loader to load my HTML template and file-loader to load images within the template, everything works smoothly in development. However, when I build for production and run the output, a template parse error occurs. The issue seems to stem ...

angularwebpackwebpack-file-loaderwebpack-html-loader

Explaining the structure of a nested object within a TypeScript declaration file

As I work on my project, I encounter the challenge of importing an object created by a dynamic function. The dynamic nature of the keys on this object poses a problem for the IDE, as it cannot determine what keys are present based on the provided config. T ...

javascripttypescriptnamespacesdeclare.d.ts

Is there a way to invoke an Angular2 function from within a Google Map infowindow?

I am currently working on integrating Google Maps using javascript in a project, and I'm facing a challenge. I want to call an Angular2 function inside an infowindow as shown in the code snippet below. Pay attention to the infoContent variable that co ...

javascriptgoogle-maps-api-3angulargoogle-maps-markers

Accelerated repository uses TypeScript to compile a node application with dependencies managed within a shared workspace

Struggling to set up an express api within a pnpm turborepo workspace. The api relies on @my/shared as a dependency, which is a local workspace package. I have been facing challenges in getting the build process right. It seems like I need to build the s ...

typescriptturborepo