时间戳

首页 > 解决方案 > 如何通过 html 表单设置嵌套 formBuilder 组的值

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

问题描述

嵌套 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"但它没有从中获得价值。如何在我的表单中设置嵌套的表单控件？

标签： htmlangulartypescriptangular-forms

解决方案

你必须使用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>

推荐阅读