切换表单组名称时出错，Angular多语言表单技术咨询

看起来你遇到的问题主要来自两个方面：带连字符的表单组键在模板中的解析问题，以及切换语言时表单组的动态绑定没有正确生效。咱们一步步来修复：

核心问题分析 #

1. 带连字符的表单组键无法直接通过静态字符串绑定：Angular模板表达式会把en-Gb里的连字符当成减法运算符，直接写formGroupName="en-Gb"会触发语法错误。
2. 切换语言时模板未自动更新表单组绑定：如果模板里写的是固定的表单组名称，切换currentLang后不会自动切换到对应的目标表单组。

修正后的组件代码 #

首先，确保组件里访问带连字符的表单组时使用方括号语法（而非点语法），同时保留你的切换逻辑，还可以新增一个getter简化模板访问：

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

@Component({
  selector: 'app-lang-form',
  templateUrl: './lang-form.component.html'
})
export class LangFormComponent {
  currentLang: string = "en-Gb";
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      Languages: new FormGroup({
        'en-Gb': new FormGroup({ // 给带连字符的键加引号，代码更规范
          first: new FormControl('Nancy', Validators.minLength(2)),
          last: new FormControl('Drew', Validators.required)
        }),
        'de-De': new FormGroup({
          first: new FormControl('Nancy', Validators.minLength(2)),
          last: new FormControl('Drew', Validators.required)
        }),
      })
    });
  }

  switchLang(newLang: string) {
    this.currentLang = newLang;
  }

  // 简化模板中对当前语言表单组的访问
  get currentLangForm() {
    return this.myForm.get('Languages')?.get(this.currentLang) as FormGroup;
  }
}

修正后的模板代码 #

模板中要使用动态属性绑定[formGroupName]="currentLang"来关联当前选中的语言表单组，彻底解决连字符解析问题：

<form [formGroup]="myForm">
  <div formGroupName="Languages">
    <!-- 语言切换按钮 -->
    <button (click)="switchLang('en-Gb')">English</button>
    <button (click)="switchLang('de-De')">German</button>

    <!-- 动态绑定当前语言的表单组 -->
    <div [formGroupName]="currentLang">
      <label>
        First Name:
        <input type="text" formControlName="first">
        <!-- 显示验证错误 -->
        <span *ngIf="currentLangForm.get('first')?.invalid && currentLangForm.get('first')?.touched">
          First name must be at least 2 characters long.
        </span>
      </label>
      <br>
      <label>
        Last Name:
        <input type="text" formControlName="last">
        <span *ngIf="currentLangForm.get('last')?.invalid && currentLangForm.get('last')?.touched">
          Last name is required.
        </span>
      </label>
    </div>
  </div>
</form>

关键修改点说明 #

• 给带连字符的表单组键加引号：虽然TypeScript允许部分特殊键不加引号，但带连字符的必须加引号，代码可读性更强。
• 使用动态属性绑定[formGroupName]="currentLang"：既避免了连字符被解析成减法的语法错误，又能在切换currentLang时自动同步表单组。
• 新增currentLangForm getter：不用在模板里重复写冗长的myForm.get('Languages').get(currentLang)，让模板更简洁。

测试验证 #

1. 页面加载后默认显示en-Gb的表单，输入验证规则正常生效。
2. 点击切换按钮后，表单会自动切换到对应语言的控件，各自的表单数据会独立保留。
3. 切换语言后，验证规则依然正常作用于当前表单组。

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