Angular 9 - 具有相同名称的不同formGroupName formControlName会影响相同的formControlName

Question

我创建了表单：FormGroup 变量，其中我使用 FormArray 定义了组本地化数据：在我的服务的构造函数中这样的 FormArray：

this.form = this.formBuilder.group({
    localizationData: this.formBuilder.array([])
});

然后我用这个函数向那个 FormArray 推送一个带有特定 FormControl 的 FormGroup：

addLocalizedFormGroup(locale?: any){
    locale = (locale == undefined) ? this.selectedLocale : locale;
    let formArray = <FormArray>this.form.get('localizationData');
    formArray.push(this.formBuilder.group({       
        locale: [locale.code],
        codelistName: ['', Validators.required]
    }));
    locale.created = true;
    this.createdLocales.push(locale);
}

在组件的 ngOnInit 中，我调用了该函数两次。语言环境对象变量示例：

{ "code": "SK", "name": "Slovenčina" }

为了向用户显示该语言环境的特定格式，我使用此功能：

localeFormatter = (x: any) => x.code + " | " + x.name;

我实现了带有本地化的简单选项列表供用户选择：

<div class="form-group col-3">
    <label>Lokalizácia
        <select class="form-control" [(ngModel)]="this.defservice.selectedLocale">
            <option *ngFor="let locale of this.defservice.createdLocales" [ngValue]="locale">{{this.defservice.localeFormatter(locale)}}</option>
        </select>
    </label>
</div>

该选项列表工作正常。当我选择不同的语言时，模型会作为一个对象发生变化。要按语言环境查找 FormGroup，我为此创建了非常简单的函数：

localizationIndexOf(locale: any): number{
    return (<FormArray>this.form.get('localizationData')).controls.findIndex(x => x.get('locale').value == locale.code);
}

现在，我要挑战的问题是显示 FormControl 的用户值，codelistName，正如您在函数 addLocalizedFormGroup 中所定义的那样。这是html：

<ng-container [formGroup]="defservice.form">
    <ng-container formArrayName="localizationData">
        <ng-container [formGroupName]="defservice.localizationIndexOf(defservice.selectedLocale)">
            <div class="row">
                <div class="form-group col-2">
                    <label>Lokalizácia
                        <input type="text" class="form-control" [value]="defservice.localeFormatter(defservice.selectedLocale)"
                                disabled="true">
                    </label>
                </div>
                <div class="form-group col-10">
                    <label>Názov <span style="color: red">*</span>
                        <input type="text" class="form-control" formControlName="codelistName">
                     </label>
                </div>
            </div>
        </ng-container>
    </ng-container>
</ng-container>

但是在选项列表中切换语言后，本地化值正确更改，localizationIndexOf(defservice.selectedLocale) 返回正确的索引，但在编辑使用函数 addLocalizedFormGroup 创建的 FormmArray 的任何索引的 codelistName 后，我添加的只有第一个（索引为 0 ） 在改变。我打印表单的整个值，它只显示第一语言的变化值。如果我有 2 或 10 种语言的事件。我的意思是 2 或 10 个将 FormGroups 推入表单的定位数据 FormArray 中：FormGroup。似乎在第一次加载组件时，formGroup 从不更新他的值，我参考了这一行：

<ng-container [formGroupName]="defservice.localizationIndexOf(defservice.selectedLocale)">

感谢您的任何建议。

Answer 1

我重新创建了我这边的问题，但无法使用*ControlName='' 语法找到解决方案。我找到了一个[formControl]=''，但你必须忘记formGroupName层次结构。

如果可以保留localizationData: FormArray的当前FormGroup的索引，就可以从数组中获取控件：

<input class="..." type="text" [formControl]="localizationData.at(currentLocaleIndex).get('codelistName')">

localizationData 是 FormArray 的吸气剂：

get localizationData(): FormArray {
    return this.form.get('localizationData') as FormArray
  }

让currentLocaleIndex 保持最新的解决方案是在<select> 发生更改时更新值，如下所示：

<select (change)="updateCurrentLocaleIndex()" class="form-control" [(ngModel)]="this.defservice.selectedLocale">
  <option *ngFor="let locale of this.defservice.createdLocales" [ngValue]="locale">{{this.defservice.localeFormatter(locale)}}</option>
</select>

在你的组件类中：

updateCurrentLocaleIndex() {
   this.currentLocaleIndex = this.localizationIndexOf(this.defservice.selectedLocale)
 }