英文:
Reactive Form: Multiple layers of a form in one FormGroupName / FormControlname
问题
在一个响应式表单中，是否可以在一个 formGroupName 或 formControlName 指令中传递多层表单？
例如：
profileForm = new FormGroup({
names = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl('')
})
});
然后在一个输入字段中，我想直接访问路径 name.firstName，而不需要在一个 div 中使用外部的 formGroupName。
英文:
Is it possible to pass in a reactive form multiple layers of a form in one formGroupName / formControlName Directive?
For example:
profileForm = new FormGroup({
names = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl('')
})
});
And in an Input Field i want to directly access the path name.firstName without an outer formGoupName at a div.
答案1
得分: 1
以下是翻译好的部分：
一般来说，您可以使用以下方式：
<!-- 小心，这种方式不起作用 -->
<input [formControl]="profileForm.get('names.firstName')" />
问题在于 [get][1] 返回一个抽象控件，因此您需要使用一个 getter：
// 在 .ts 文件中
get firstNameControl() {
return profileForm.get('names.firstName') as FormControl
}
然后在使用 getter 之前：
<!-- 使用 getter -->
<input [formControl]="firstNameControl" />
<details>
<summary>英文:</summary>
In general you can use some in the way
<!--careful, it not work-->
<input [formControl]="profileForm.get('names.firstName')"/>
The problem is that [get][1] return an abstractControl so you need use a getter
//in .ts
get firstNameControl()
{
return profileForm.get('names.firstName') as FormControl
}
<!--using the getter before-->
<input [formControl]="firstNameControl"/>
[1]: https://angular.io/api/forms/AbstractControl#get
</details>
# 答案2
**得分**: 1
使用 `formControlName` 指令：
```html
<form [formGroup]="profileForm">
<div formGroupName="names">
<input type="text" formControlName="firstName">
<input type="text" formControlName="lastName">
</div>
</form>
英文:
Use formControlName directive:
<form [formGroup]="profileForm">
<div formGroupName="names">
<input type="text" formControlName="firstName">
<input type="text" formControlName="lastName">
</div>
</form>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论