如何通过 html 表单设置嵌套 formBuilder 组的值

Question

嵌套 formBuilder 示例：

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

基本上你需要三样东西，

表格组
formGroupName
formControlName

在你的component.ts中：

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

在你的Component.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>

如何通过 html 表单设置嵌套 formBuilder 组的值

How do I set the value of a nested formBuilder group by a html form

html

angular

typescript

angular-forms