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

Question

我创建了form:FormGroup变量，在那里我用FormArray本地化定义了组数据：FormArray，就像我的服务的构造函数中这样

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

然后我向FormArray推送一个具有特定FormControl的FormGroup，该FormControl具有以下功能：

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(返回正确的索引，但在编辑codelistName后，用函数addLocalizedFormGroup创建的FormmArray的任何索引，我添加的，只有第一个(索引为0(在更改。我打印了整个形式的值，它只显示了第一语言的变化值。事件，如果我有2种或10种语言。我的意思是，2或10个将FormGroups推送到表单为FormGroup的本地化数据FormArray中。似乎在第一次加载组件时，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的getter：

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)
}