Angular响应式表单添加带输入框的单选「其他」选项问题

核心问题分析 #

你之前的写法把文本框和单选框绑定了同一个formControlName和name，破坏了单选组的互斥性，导致可以同时选中多个选项。下面是正确的实现方案：

完整代码实现 #

HTML模板部分

<p>
  <label><b>What's your favorite fruit</b></label>
  <br />
  <!-- 每个单选框设置唯一ID，保证单选组name一致 -->
  <input type="radio" value="Apple" id="apple" name="favFruit" formControlName="favFruit" /> 
  <label for="apple">Apple</label>
  <br />
  <input type="radio" value="Banana" id="banana" name="favFruit" formControlName="favFruit" /> 
  <label for="banana">Banana</label>
  <br />
  <input type="radio" value="Orange" id="orange" name="favFruit" formControlName="favFruit" /> 
  <label for="orange">Orange</label>
  <br />
  <input type="radio" value="Pear" id="pear" name="favFruit" formControlName="favFruit" /> 
  <label for="pear">Pear</label>
  <br />
  <input type="radio" value="Grapes" id="grapes" name="favFruit" formControlName="favFruit" /> 
  <label for="grapes">Grapes</label>
  <br />
  <!-- 添加「Other」单选选项 -->
  <input type="radio" value="other" id="other" name="favFruit" formControlName="favFruit" /> 
  <label for="other">Other</label>
  <br />
  <!-- 仅当选中「Other」时显示文本框 -->
  <input 
    type="text" 
    id="otherFruit" 
    formControlName="otherFruit"
    *ngIf="form.get('favFruit')?.value === 'other'"
    placeholder="Enter your favorite fruit"
  />
</p>
<button type="submit" [disabled]="form.invalid" (click)="onSubmit()">Submit</button>

组件类逻辑部分

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-fruit-form',
  templateUrl: './fruit-form.component.html',
  styleUrls: ['./fruit-form.component.css']
})
export class FruitFormComponent implements OnInit {
  form!: FormGroup;

  ngOnInit(): void {
    this.form = new FormGroup({
      favFruit: new FormControl('', Validators.required),
      otherFruit: new FormControl('')
    });

    // 监听单选框变化，切换选项时清空「其他」输入框
    this.form.get('favFruit')?.valueChanges.subscribe(value => {
      const otherCtrl = this.form.get('otherFruit');
      if (value !== 'other') {
        otherCtrl?.setValue('');
        otherCtrl?.clearValidators();
      } else {
        // 选中「Other」时，强制要求输入框必填
        otherCtrl?.setValidators(Validators.required);
      }
      otherCtrl?.updateValueAndValidity();
    });
  }

  onSubmit(): void {
    const formValue = { ...this.form.value };
    // 提交时替换「Other」为用户输入的自定义水果名
    if (formValue.favFruit === 'other') {
      formValue.favFruit = formValue.otherFruit.trim();
    }
    // 这里写表单提交逻辑，比如调用API
    console.log('提交数据:', formValue);
  }
}

关键实现要点 #

• 所有单选框共享同一个name="favFruit"，保证单选互斥，只能选中一个选项。
• 用*ngIf指令控制「其他」文本框的显示，仅当选中对应单选选项时才展示。
• 添加条件验证：选中「Other」时，文本框必须填写内容，否则表单无法提交。
• 提交表单时自动将自定义输入值替换到favFruit字段，保证数据格式统一。

内容的提问来源于stack exchange，提问作者User9123