I'm trying to show multiple radio buttons. I'm able to show and get the save the value in the .ts file also. But when i click on the button it captures the value but not be active for all the times like the simple radio button does. I'm using the Angular Reactive form

I've added the whole code in both html and ts file.

This is my HTML

<div >
   <div >
       <div >Add new Details</div>
       <div >
           <form [formGroup]="reactiveFormDemo" (ngSumbit)="getData()">
               <div>
                   <tabset #staticTabs>
                       <!-- #Basic Sections -->
                       <tab heading="Basic Sections">

                           <div >
                               <label >User Name</label>
                               <input type="text"  aria-describedby="emailHelp" placeholder="Enter Name" formControlName="Name">
                           </div>
                           <div >
                               <label >Email Address</label>
                               <input type="text"  aria-describedby="emailHelp" placeholder="Enter Email" formControlName="Email">
                           </div>
                           <div >
                               <label >Contact No.</label>
                               <input type="text"  aria-describedby="emailHelp" placeholder="Enter Phone" formControlName="Phone">
                           </div>

                           <div >
                               <h3 >I'm </h3>
                               <div >
                                   <label  role="button" *ngFor="let gen of GenderType">
                                 <input
                                   
                                   type="radio"
                                   [value]="gen"
                                   formControlName="Gender"
                                 />
                                 <span>{{gen}}</span>
                               </label>
                               </div>
                           </div>
                           <p>
                               <button type="button"  (click)="selectTab(1)">Next</button>
                           </p>
                       </tab>
                       <!-- #Address Details -->
                       <tab heading="Address Details">
                           <div >
                               <label >Country</label>
                               <input type="text"  aria-describedby="emailHelp" placeholder="Enter Name" formControlName="Country">
                           </div>
                           <div >
                               <label >State</label>
                               <input type="text"  aria-describedby="emailHelp" placeholder="Enter Name" formControlName="State">
                           </div>
                           <div >
                               <label >City</label>
                               <input type="text"  aria-describedby="emailHelp" placeholder="Enter Name" formControlName="City">
                           </div>

                           <p>
                               <button type="button"  (click)="selectTab(0)">Back</button>
                               <button type="button"  (click)="selectTab(2)">Next</button>
                           </p>
                       </tab>
                       <!-- #Payment Details -->
                       <tab heading="Payment Details">
                           <div >
                               <h3 >Have you done with Payment or not? </h3>
                               <div >
                                   <label  role="button" *ngFor="let pay of Payments">
                                 <input
                                   
                                   type="radio"
                                   [value]="pay"
                                   formControlName="Payment"
                                 />
                                 <span>{{pay}}</span>
                               </label>
                               </div>
                           </div>
                           <p>
                               <button type="button"  (click)="selectTab(1)">Back</button>
                           </p>

                           <button type="submit" (click)="getData()">Submit</button>
                       </tab>
                   </tabset>

               </div>

           </form>
       </div>
   </div>
</div>

This is my TS

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder,FormControl } from '@angular/forms';
import { TabsetComponent } from 'ngx-bootstrap/tabs';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  @ViewChild('staticTabs', ) staticTabs?: TabsetComponent;
  
  GenderType=['Male','Female','TransGender'];
  Payments=['Yes','No']
  constructor(private fb:FormBuilder) { }

  ngOnInit(): void {
    
  }

  reactiveFormDemo=new FormGroup({
      Name:new FormControl(''),
      Email:new FormControl(''),
      Phone:new FormControl(''),
      Gender:new FormControl(''),
      Country:new FormControl(''),
      State:new FormControl(''),
      City:new FormControl(''),
      Payment:new FormControl('')
  })

  //Tabset components

 
  selectTab(tabId: number) {
    if (this.staticTabs?.tabs[tabId]) {
      this.staticTabs.tabs[tabId].active = true;
    }
  }
  getData()
  {
    console.log("submitted",this.reactiveFormDemo.value);
    console.log(this.reactiveFormDemo.controls['Gender'].value);
  }

  colorChange(){
    
    console.log("working!")
  }
}

CodePudding user response：

You can add the [checked] attribute to the input element and bind it to the value of the form control. This will ensure that the selected radio button remains active even after clicking the button:

<div > 
  <label  role="button" *ngFor="let gen of GenderType"> 
    <input   type="radio" [value]="gen" formControlName="Gender" [checked]="form.controls['Gender'].value === gen"> 
    <span>{{gen}}</span> 
  </label>
</div>

CodePudding user response：

You need to import ReactiveFormsModule and use [formGroup]="yourFormName".

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `
    <form [formGroup]="myForm">
      <div >
        <label
          
          role="button"
          *ngFor="let gen of GenderType"
        >
          <input
            
            type="radio"
            [value]="gen"
            formControlName="Gender"
          />
          <span>{{gen}}</span>
        </label>
      </div>
    </form>
  `,
})
export class App {
  name = 'Angular';

  GenderType = ['male', 'female', 'x', 'y'];

  myForm = new FormGroup({
    Gender: new FormControl(),
  });
}

bootstrapApplication(App);