如何通过 html 表单设置嵌套表单生成器组的值

Question

嵌套表单生成器的示例：

ngOnInit() {
this.user = this.fb.group({
name: ['', [Validators.required, Validators.minLength(2)]],
quest1: ['', Validators.required],
account: this.fb.group({
email: ['', Validators.required],
confirm: ['', Validators.required]
})
});
}

还有我的 html 表单示例：

<form class="ui-fluid form-group" [formGroup]="user ">
<div class="ui-g-12 ui-md-6">
<span class="md-inputfield">
<input type="text" pInputText formControlName="name">
<label>Name</label>
</span>
</div>
<div class="ui-g-12 ui-md-6">
<span class="md-inputfield">
<input type="text" pInputText formControlName="quest1">
<label>Question</label>
</span>
</div>
<div class="ui-g-12 ui-md-6">
<span class="md-inputfield">
<input type="text" pInputText formControlName="account.email">
<label>Email</label>
</span>
</div>
<div class="ui-g-12 ui-md-6">
<span class="md-inputfield">
<input type="text" pInputText formControlName="account.confirm">
<label>Confirm</label>
</span>
</div>
</form>

我将嵌套控制器组设置为formControlName="account.confirm">，但它没有从中获取值。 如何在表单中设置嵌套表单控件？

Answer 1

你必须使用formGroupName即，

<div formGroupName="account">

随后仅使用内部窗体组中的控件名称

<input type="text" pInputText formControlName="confirm">

---

现在，内部窗体将如下所示：

<form class="ui-fluid form-group" [formGroup]="user">
... 
<div formGroupName="account">
...
<input type="text" pInputText formControlName="email">
...   
<input type="text" pInputText formControlName="confirm">
</div>
</form>

Answer 2

基本上你需要三样东西，

• 表单组

• 表单组名称

• 表单控件名称

在您的组件中：

import { FormGroup, FormBuilder, Validators } from '@angular/forms';
userForm: FormGroup;
this.userForm = this.fb.group({
name: ['', [Validators.required, Validators.minLength(2)]],
quest1: ['', Validators.required],
account: this.fb.group({
username: ['', Validators.required],
password: ['', Validators.required]
})
});

在您的组件中.html：

<form [formGroup]="userForm" class="ui-fluid form-group">
<div formGroupName="account" class="ui-g-12 ui-md-6">
<span class="md-inputfield">
<input type="text" formControlName="username">
<label>Name</label>
</span>
</div>
<div formGroupName="account" class="ui-g-12 ui-md-6">
<span class="md-inputfield">
<input type="text" formControlName="password">
<label>Name</label>
</span>
</div>
</form>