The label for the Angular radio button isn't displaying correctly

I encountered an issue with my component code where the radio button label does not display correctly when I try to edit it. The radio button value also does not get set correctly to the form value and always shows as "No". Despite adding [ngModel] & [value], I am still unable to see the variable properly.

 Form: FormGroup;
 ngOnInit(): void {
   this.createForm();
  if (this.isEdit) {  
  this.editForms();
   }
 }

 private createForm() {
    this.Form = this.formBuilder.group({     
      isRepository: [{ value: '', disabled: false }],
      remember: true
    });

isPrivateCheck(val: boolean) {
    this.isPrivate = val;
    if (this.isPrivate) {
      this.buttonName = 'Yes';
    } else {
      this.buttonName = 'No';
    } 
  }

Below is my HTML code:

<form [formGroup]="Form">
    <div class="form-group">
            <label>Private Repository</label>
            <div class="switch">

                <input (change)="isPrivateCheck(false)" type="radio" class="switch-input" id="yes" [ngModel]="isRepository"  [value]="buttonName" name="isRepository" formControlName="isRepository">
             <label  for="yes" class="switch-label switch-label-off">No</label>
                <input (change)="isPrivateCheck(true)" type="radio" class="switch-input" id="no" [ngModel]="isRepository" [value]="buttonName" name="isRepository>
            <label for="no" class="switch-label switch-label-on">Yes</label>
<span class="switch-selection"></span>
            </div>
        </div>

</form>

After removing the following HTML code:

<label for="no" class="switch-label switch-label-on">Yes</label>

I notice that the label value disappears entirely.

angulartypescriptradio-buttonformgroups

Answer №1

While reviewing your code, I came across some syntax errors. It's unclear whether these errors actually occurred or if this is just a sample for publication on StackOverflow. One issue I noticed is that you did not close the second input field properly due to a duplicate name with 'isPrivate'. After making some corrections to your code, it now functions as expected.

component.ts

Form: FormGroup;
isPrivate = false;
buttonName;
constructor(private formBuilder: FormBuilder) {}

ngOnInit(): void {
this.createForm();
}

private createForm() {
   this.Form = this.formBuilder.group({
   isRepository: [{ value: '', disabled: false }],
   remember: true
});
}

checkIsPrivate(val: boolean) {
  this.isPrivate = val;
  if (this.isPrivate) {
   this.buttonName = 'Yes';
  } else {
   this.buttonName = 'No';
  }
}

component.html

<form [formGroup]="Form">
<div class="form-group">
<label>Private Repository</label>
<div class="switch">

  <input (change)="checkIsPrivate(false)" type="radio" class="switch-input" id="yes" [value]="buttonName" name="isRepository" formControlName="isRepository"/>
  <label for="yes" class="switch-label switch-label-off">No</label>
  <input (change)="checkIsPrivate(true)" type="radio" class="switch-input" id="no" [value]="buttonName" name="isRepository"/>
  <label for="no" class="switch-label switch-label-on">Yes</label>
  <span class="switch-selection"></span>
  <div>{{buttonName}}</div>
  </div>
 </div>
    </form>

I have created a StackBlitz sample based on your code. Feel free to check it out to see if it resolves your issue.

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

Activate a function to focus on an input field once ngIf condition becomes true and the input is revealed

I am currently attempting to focus the cursor on a specific input field that is only displayed when the condition of the surrounding ngIf directive is true. Here is an example of the HTML code structure: <div> <button (click)="showFirst = ...

javascriptangular

Choose the appropriate NPM module platform for Angular development

My Angular application runs smoothly in Chrome, but encounters errors on Internet Explorer. The issue arises from the different distributions of NPM modules I install. For instance, within the kendo-angular-charts folder, we have: - dist |- cdn |- e ...

angularnpmnode-moduleskendo-ui-angular2

Utilizing Angular Components Across Various Layers: A Guide

Consider the following component structure: app1 -- app1.component.html -- app1.component.ts parent1 parent2 app2 -- app2.component.html -- app2.component.ts Is it possible to efficiently reuse the app2 component within the ap ...

javascriptangulartypescript

The credentials in AWS S3Client are failing to load correctly

I encountered an issue with the S3 Client from aws sdk v3: When using the S3Client as outlined in the documentation and providing credentials via environment variables, I received an error message stating The AWS Access Key Id you provided does not exist ...

javascripttypescriptamazon-s3aws-sdk

Issue encountered while trying to install Angular2 using NPM

My attempts to install Angular2 through Terminal have been met with some errors. I have verified that Node and NPM are both current. Screenshot of the Terminal As a newcomer, any assistance would be greatly appreciated. Thank you, Spen ...

angularterminalnpm

When Angular renders for the first time, the route query parameters are found to be empty

In my current situation, I am determining actions based on the query parameters of the Angular URL. For instance, if the URL is localhost:4200/token=abc, certain tasks need to be performed, and if the URL is just localhost:4200, a different set of actions ...

angularangular-routerquery-stringangular-activatedrouteangular-router-params

Exploring the integration of Styled-components in NextJs13 for server-side rendering

ERROR MESSAGE: The server encountered an error. The specific error message is: TypeError: createContext only works in Client Components. To resolve this issue, add the "use client" directive at the top of the file. More information can be found here i ...

javascripttypescriptnext.jsstyled-componentsserver-side-rendering

Scroll horizontally based on mouse movement

My angular directive that enables me to choose the content of table cells is performing as expected. However, I encountered an issue when attempting to select multiple cells at once - the scrollbar does not move, hindering my ability to select the cells. ...

javascriptcssangular

Changing the ngModel value causes the maxlength to become ineffective

<input type="text" [(ngModel)]="name" maxlength="10"/> @Component({...}) export class MyComponent { name = "testtesttesttesttest"; // length = 20 } When the input field is displayed, it shows all 20 characters. What steps can be taken to prevent ...

angularvalidationmaxlengthangular2-ngmodel

Error encountered in Ionic Storage (version 8) within an Angular 17 project: `ERROR NullInjectorError: NullInjectorError: Storage provider is missing`

I keep running into this error message in my browser console: ERROR NullInjectorError: NullInjectorError: No provider for Storage!, when trying to set up Ionic Storage in Ionic 8 (Angular 17). Any advice on the correct setup process would be highly appreci ...

angularionic-frameworkangular17ionic-storage

Trouble Sending Data from Angular HttpClient to ASP.NET CORE Web API

I have recently developed a new component called "form-page" within the "form" module: The HTML code for form-page.component.html is shown below: <form [formGroup]="form" (submit)="onSubmit()"> <div> <label f ...

htmlangulartypescriptasp.net-core-webapiangular-httpclient

Encountering a ng-select2 error while running ng-serve in Angular version 11.2.14

Encountering an error while attempting to run ng-serve on a newly cloned repository. It worked fine on my previous device but now, with the new device, a coworker suspects that the M1 Apple Silicon is causing this error. For the full error log, visit http ...

angularnpmnpm-installangular-ngselect

Typescript does not produce unused members

Having an issue with the JS code that TypeScript compiler is generating. Here's an example class: // Class export class UserDTO { Id: number; FirstName: string; LastName: string; DateOfBirth: Date; getFullName(): string { ...

javascripttypescriptknockout-mapping-plugin

WDIO executes both the main wdio.conf file and its corresponding child configuration file, instead of solely running the child file

Thank you in advance for your assistance. I am currently using node 16 and wdio version 8 to develop a basic suite of tests. To ensure that I start off on the right foot, I have been working on creating a foundational wdio.conf.base configuration file alo ...

javascripttypescriptwdio

Using Angular2 to perform search functions within the Loopback framework

Can anyone assist me with implementing a "wildcard" query using loopback to search data from the database in my angular2 project? Thank you in advance for your help. This is the query I am trying to use: this.model.find({ "where": { "wildcard ...

elasticsearchtypescriptangularloopback

Troubleshooting the Issue with Angular Material Dialog Imports

Hey there, I'm trying to utilize the Angular Material dialog, but I'm encountering issues with the imports and I can't seem to figure out what's wrong. I have an Angular Material module where I imported MatDialog, and I made sure to i ...

angulartypescriptangular-material

The array contains data, yet the console is displaying a length of 0 for the array

I’m experiencing an issue with my code that involves a files array. Whenever I add a new file, it displays the incorrect length of the array. Strangely, if I use setTimeout to check the length, it shows the correct one. console.log('row.myDocuments ...

arraysangularconsole

What methods does Angular use to manipulate the DOM?

Picture this scenario... <ul> <li *ngFor="random"></li> </ul> ...with a MutationObserver monitoring its changes: observer.observe(this.el, { characterData: true, subtree: true }); Whenever this template renders, the observer ...

angularmutation-observers

Upon attempting to send an HTTP POST request from Angular to Node using Express.js, the operation became stuck with a status 204 indicating no content. The

I'm currently using client-side Ionic with server-side Node.js + Express.js for testing on my local computer. While I can successfully do a POST request using Postman, I am facing difficulties making it work through Ionic. Investigation I have spen ...

node.jsangularexpressionic-frameworkcors

Having trouble with *ngif not functioning properly after initial click in Angular 6

How do I create a Select field in Angular 6 that will hide or display another div based on the selected value? Below is the code snippet: <div class="form-group"> <label for="servicePriviledges">Managed</label> < ...

javascriptangularangular4-formsweb-frontend