Angular 5中如何根据单选框值配置输入框的formControlName与placeholder

在Angular 5中，我们可以通过响应式表单的动态绑定能力，轻松实现根据单选按钮选中值切换输入框的formControlName和placeholder属性。以下是完整的实现方案：

1. 组件类代码（.ts文件） #

首先，我们需要在组件中定义表单组，包含跟踪单选按钮选中值的控件，以及对应邮箱、电话的输入控件：

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

@Component({
  selector: 'app-contact-input',
  templateUrl: './contact-input.component.html',
  styleUrls: ['./contact-input.component.css']
})
export class ContactInputComponent implements OnInit {
  // 定义单选按钮的选项配置，方便统一管理标签和占位符
  contactOptions = [
    { value: 'email', label: 'E-mail', placeholder: '请输入您的邮箱地址' },
    { value: 'phone', label: '电话', placeholder: '请输入您的手机号码' }
  ];

  contactForm: FormGroup;

  ngOnInit() {
    // 初始化表单组
    this.contactForm = new FormGroup({
      // 跟踪选中的联系方式类型，默认选中email
      contactType: new FormControl('email'),
      // 邮箱输入控件，添加验证规则
      email: new FormControl('', [Validators.required, Validators.email]),
      // 电话输入控件，添加验证规则
      phone: new FormControl('', [Validators.required, Validators.pattern(/^[1-9]\d{10}$/)])
    });
  }

  // 根据选中的类型获取对应的占位符
  getPlaceholder(type: string): string {
    const option = this.contactOptions.find(opt => opt.value === type);
    return option ? option.placeholder : '';
  }
}

2. 模板代码（.html文件） #

在模板中，我们需要将单选按钮绑定到表单控件，并动态设置输入框的formControlName和placeholder：

<form [formGroup]="contactForm" class="form-group">
  <!-- 单选按钮组 -->
  <div class="list-inline">
    <div class="list-inline-item" *ngFor="let option of contactOptions">
      <div class="radio-outer">
        <input 
          [id]="'contact-' + option.value" 
          name="contactType" 
          type="radio" 
          [value]="option.value"
          formControlName="contactType"
        />
        <label [for]="'contact-' + option.value">{{ option.label }}</label>
      </div>
    </div>
  </div>

  <!-- 动态切换的输入框 -->
  <div class="form-group mt-3">
    <input 
      type="text" 
      class="form-control"
      <!-- 动态绑定formControlName，根据选中的联系方式类型 -->
      [formControlName]="contactForm.get('contactType').value"
      <!-- 动态设置占位符 -->
      [placeholder]="getPlaceholder(contactForm.get('contactType').value)"
    />

    <!-- 错误提示信息（可选） -->
    <div *ngIf="contactForm.get(contactForm.get('contactType').value).invalid && contactForm.get(contactForm.get('contactType').value).touched" class="text-danger mt-1">
      <small *ngIf="contactForm.get(contactForm.get('contactType').value).hasError('required')">此字段为必填项</small>
      <small *ngIf="contactForm.get('email')?.hasError('email')">请输入有效的邮箱地址</small>
      <small *ngIf="contactForm.get('phone')?.hasError('pattern')">请输入有效的手机号码</small>
    </div>
  </div>
</form>

关键知识点说明 #

• 响应式表单绑定：通过formControlName将单选按钮与contactType控件绑定，选中值会自动同步到表单组中。
• 动态属性绑定：输入框的formControlName使用方括号[]进行属性绑定，这样可以动态传入当前选中的联系方式类型（email或phone），从而切换绑定的表单控件。
• 统一配置管理：将单选按钮的标签、值和占位符放在数组中统一管理，避免模板中重复代码，也方便后续扩展更多选项。

如果你不想使用循环渲染单选按钮，也可以手动编写每个单选按钮（如下），逻辑是完全一致的：

<div class="list-inline">
  <div class="list-inline-item">
    <div class="radio-outer">
      <input id="contact-email" name="contactType" type="radio" value="email" formControlName="contactType" />
      <label for="contact-email">E-mail</label>
    </div>
  </div>
  <div class="list-inline-item">
    <div class="radio-outer">
      <input id="contact-phone" name="contactType" type="radio" value="phone" formControlName="contactType" />
      <label for="contact-phone">Phone</label>
    </div>
  </div>
</div>

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