在 Angular 中单击时如何使按钮保持活动状态？我正在使用 *ngFor 来显示我所有的单选按钮

Question

我正在尝试显示多个单选按钮。我也能够在 .ts 文件中显示并获取保存值。但是当我点击按钮时，它会捕获值但不会像简单的单选按钮那样一直处于活动状态。我正在使用 Angular Reactive 表单

这是我的 HTML

<div class="btn-group">
   <label class="btn btn-outline-primary btn-color-change m-2" role="button" *ngFor="let gen of GenderType">
<input class="btn-check btn-color-change "  type="radio" [value]="gen" formControlName="Gender"><span>{{gen}}</span>
</label>

这是我的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!")
  }
}

Answer 1

您可以将 [checked] 属性添加到输入元素并将其绑定到表单控件的值。这将确保选定的单选按钮即使在单击按钮后仍保持活动状态：

<div class="btn-group"> 
  <label class="btn btn-outline-primary btn-color-change m-2" role="button" *ngFor="let gen of GenderType"> 
    <input class="btn-check btn-color-change "  type="radio" [value]="gen" formControlName="Gender" [checked]="form.controls['Gender'].value === gen"> 
    <span>{{gen}}</span> 
  </label>
</div>

Answer 2

你需要导入ReactiveForms模块并使用[表单组]="您的表单名称".

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 class="btn-group">
        <label
          class="btn btn-outline-primary btn-color-change m-2"
          role="button"
          *ngFor="let gen of GenderType"
        >
          <input
            class="btn-check btn-color-change"
            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);