gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 08:54:45 30 4
gpt4 key购买 nike

我创建了 form: FormGroup 变量,我在服务的构造函数中使用 FormArray localizationData: FormArray 定义了组:

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

然后我将具有特定 FormControl 的 FormGroup 推送到该 FormArray,并具有此功能:

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 ) 在改变。我打印了整个形式的值(value),它只显示了第一语言的变化值(value)。事件如果我有 2 种或 10 种语言。我的意思是 2 或 10 个将 FormGroups 插入表单的 localizationData FormArray:FormGroup。似乎在第一次加载组件时,formGroup 永远不会更新他的值,我引用了这一行:

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

感谢您的任何建议。

最佳答案

我自己重新创建了问题,但无法找到 *ControlName='' 的解决方案句法。我找到了一个 [formControl]=''但你将不得不忘记 formGroupName层次结构。

如果你能保留当前FormGroup的索引的引用的 localizationData: FormArray ,您将能够从数组中获取控件:

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

localizationData是 FormArray 的 setter/getter :

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

还有一个解决方案来保持currentLocaleIndex up to date 是在 <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)
}

关于html - Angular 9 - 具有相同名称的 formControlName 的不同 formGroupName 影响相同的 formControlName,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63893251/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com