- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我创建了 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/
我正在尝试来自官方 Angular 响应式(Reactive)表单验证 doc 。我在渲染 formControlName 时遇到问题。它给出了用户名未定义的错误这里有一个错误 Error: Unca
我创建了 form: FormGroup 变量,我在服务的构造函数中使用 FormArray localizationData: FormArray 定义了组: this.form = this.fo
我正在使用响应式控件构建动态表单,我需要能够显示数据而不是在输入控件中使用它。我基本上有一个开关,可以在基于输入和只读(用于打印)之间切换表单。但是,我不能将 label 或 span 与 formC
我想创建一个自定义输入组件并在我的表单中重用它,但我遇到了 formGroup 和 formControlName 的问题。 // Form // CustomInput Component
在括号内使用 formControlName 和不在括号内有什么区别?在动态表单教程中 formcontrolname 被用在方括号内 [formControlName]="dyncontrol.ke
我在 Mat-Autocomplete 上使用 formControlName 时遇到问题。 我不知道为什么,但我的 formControlName 不会发送数据,是我写错了吗? 当我尝试从 HTML
我想创建一个可以与 FormBuilder API 一起使用的自定义输入组件。如何在组件中添加 formControlName? 模板: {{ label }}
新: 所以我可以让它在没有 radio 组或没有正确绑定(bind)的情况下工作。我无法让它与两者一起工作。 这是允许的:
我正在使用 mat-select ,我需要为它设置默认值。它有效,但在向其添加 formControlName 后,不显示其默认值。 我试过 [(ngModel)] 和 [(value)] ,以及“m
在创建模型驱动表单时,我收到一个错误:错误:formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并将其传递给现有的 FormGroup
我想通过实现 ControlValueAccessor 创建自定义表单元素地址。 我正在尝试创建一个 AddressComponent,其中有多个输入字段。我想在如下所示的 react 形式中使用此组
我想通过实现 ControlValueAccessor 创建自定义表单元素地址。 我正在尝试创建一个 AddressComponent,其中有多个输入字段。我想在如下所示的 react 形式中使用此组
我正在通过 angularjs2 中的表单生成器制作表单,我想添加表单元素的 formControlName 属性/属性,如下所示: 我该怎么做? 编辑: 我还想将有效性消息放在输入元素旁边,
如何将 formControlName 映射到特定的 formArray 项? 我无法控制服务器数据并尝试创建一个包含电话号码数组的表单。 表单本身在视觉上并没有将手机并排布置,我希望能够像通常使用
我曾经有一个没有任何验证的简单表单,其中 HTML 大致如下所示: [(ngModel)]="todoListService.toDoData.tas
我希望将数字管道添加到 Angular2 中的输入字段。我正在使用模型驱动的表单,我的所有输入都有一个 formControlName 而不是使用数据绑定(bind)。我遇到的问题是 formCont
我正在使用基于模型的表单,我的表单如下所示: Submit 我想写一个 Protractor 规范来测试登录。我喜欢在我的规范中做类似下面的事情: element(by.f
哦,angular2...为什么这么难? {{exposure}} 如果我在输入中使用 formControlName,则值是正确的。 如何获取模板中的曝光值?标签中的空白 最佳答案 The for
作为 Angular documentation说我们可以在表单中使用 formControlName: Hero Detail FormControl in a FormGroup
我正在使用 Angular2 的 ReactiveFormsModule 创建一个包含表单的组件。这是我的代码: foo.component.ts: constructor(fb: FormBuild
我是一名优秀的程序员,十分优秀!