forms - 如何使用formControlName和处理嵌套的formGroup？

Question

正如 Angular文档所说，我们可以formControlName在表单中使用：

<h2>Hero Detail</h2>
<h3><i>FormControl in a FormGroup</i></h3>
<form [formGroup]="heroForm" novalidate>
    <div class="form-group">
        <label class="center-block">Name:
            <input class="form-control" formControlName="name">
        </label>
    </div>
</form>

正如他们所说...

如果没有父 FormGroup，[formControl]="name" 会更早地工作，因为该指令可以独立，也就是说，它可以在没有 FormGroup 的情况下工作。对于父 FormGroup，名称输入需要语法 formControlName=name 才能与类中的正确 FormControl 关联。此语法告诉 Angular 查找父 FormGroup，在本例中为 heroForm，然后在该组内查找名为 name 的 FormControl。

无论如何，几个月前我问这个formControlName来弄清楚和之间有什么区别[formControl]。

现在我的问题是：如何使用formControlName嵌套的 FormGroups？

例如，如果我有以下表单结构：

this.myForm = fb.group({
    'fullname': ['', Validators.required],
    'gender': [],
    'address': fb.group({
        'street': [''],
        'houseNumber': [''],
        'postalCode': ['']
    })
});

使用 将“street”（或“houseNumber”或“postalCode”）绑定到相关 HTML 元素的正确方法是formControlName什么？

Answer 1

您可以使用表单组，它基本上是控件的集合（控件是指在您的 html 表单中给出的字段）在您的打字稿语法中定义并使用 formControlName 指令绑定到您的 HTML 元素，例如

this.myForm = fb.group({
    'fullname': ['', Validators.required],
    'gender': [],
    'address': fb.group({
        'street': [''],
        'houseNumber': [''],
        'postalCode': ['']
    })
});

模板：

<form [formGroup]="myForm" >
   <div class="form-group">
      <label for="fullname">Username</label>
      <input type="text" id="username" formControlName="fullname" class="form-control">            
   </div>
   <div class="radio" *ngFor="let gender of genders">
      <label>
      <input type="radio" formControlName="gender" [value]="gender">{{ gender }} </label>
   </div>
   <div formGroupName="address">
      <div class="form-group">
         <label for="street">Username</label>
         <input type="text" id="username" value="street" formControlName="street" class="form-control">            
      </div>
      <div class="form-group">
         <label for="houseNumber">Username</label>
         <input type="text" id="username" value="street" formControlName="houseNumber" class="form-control">            
      </div>
      <div class="form-group">
         <label for="postalCode">Username</label>
         <input type="text" id="username" value="street" formControlName="postalCode" class="form-control">            
      </div>
   </div>
</form>

一个 formGroup 可以由一个嵌套的 formGroup 组成，层次结构可以继续存在，但在访问值时它相当简单。

Answer 2

是真的。看formGroupName

this.myForm = fb.group({
    'fullname': ['', Validators.required],
    'gender': [],
    'address': fb.group({
        'street': [''],
        'houseNumber': [''],
        'postalCode': ['']
    })
});

<form [formGroup]="myForm" >
   <div class="form-group">
      <label for="fullname">Username</label>
      <input type="text" id="username" formControlName="fullname" class="form-control">            
   </div>
   <div class="radio" *ngFor="let gender of genders">
      <label>
      <input type="radio" formControlName="gender" [value]="gender">{{ gender }} </label>
   </div>
   <div formGroupName="address">
      <div class="form-group">
         <label for="street">Username</label>
         <input type="text" id="username" value="street" formControlName="street" class="form-control">            
      </div>
      <div class="form-group">
         <label for="houseNumber">Username</label>
         <input type="text" id="username" value="street" formControlName="houseNumber" class="form-control">            
      </div>
      <div class="form-group">
         <label for="postalCode">Username</label>
         <input type="text" id="username" value="street" formControlName="postalCode" class="form-control">            
      </div>
   </div>
</form>

Answer 3

tl;博士：

您可以将表单分解为使用嵌套formgroups的组件，并且formcontrolname可以正常使用。

我倾向于使用的方法，因为通常嵌套的表单组用于指定表单的单独部分，因此将其分解为组件并将这些组件传递给嵌套的表单组作为输入参数。因此，在您的情况下，我将有一个地址组件，该组件将表单组作为参数：

<app-address [formGroup]="myForm.get('address')"></app-address

在该组件内部，我将只有一个 @Input() formGroup 将在 html 中使用：

<div [formGroup]="formGroup">
....

这样您就可以像往常一样显式引用控件名称，因为它将是该表单组的一部分。

另外，请记住表单是作为参考传递的。您的更改将在父组件的 myForm 元素中进行说明，如果您需要访问不在您的表单组中的表单部分（验证、更改检测等），您始终可以传递整个表单并将表单组定义为明确引用内部组：

<div [formGroup]="formGroup.get('adress')">

（假设您传递了整个表单对象

快乐编码！

Answer 4

我正在努力解决 Angular 10 中的一个问题。我有一个“父”表单组“forma”，它有几个依赖组：“公司”，同时，“公司”有两个“孩子”和另一个组，msgAccounts和socialMedia。当我填写表格并提交时，在后端一切都是正确的，我可以看到这些数据是如何正确存储在数据库中的，但是当我收到这个 json 时，我无法在“company.msgAccounts”和“company”中显示数据.socialMedia”在控件（输入）中。这是我从服务器得到的：

            {
            name:'',
            active: '',
            ........
            company:{
              msgAccounts:{line: "@linedemo", whatsapp: "0325554244"},
              socialMedia: {fb: '', tw: '', is: ''}
             }   
            ..........
            }
    
 this.forma = this.fb.group( {
          siteName  : [ '', [Validators.required, Validators.minLength(5)]],
          siteEmail  : [ '', [Validators.required, Validators.minLength(5)]],
          // defaultLocation: [ '', [Validators.required, Validators.minLength(10)]],
          active  : [ true, [Validators.required, Validators.minLength(5)]],
          mainLanguage: ['' , [Validators.required, Validators.minLength(2)]],
        
          company: this.fb.group({
            name: [''],
            address: [''],
            phone: [''],
            msgAccounts: this.fb.group({
              line: [],
              whatsapp: []
            }),
            socialMedia: this.fb.group({
              fb: [],
              is: [],
              tw: []
            })
          })
        });
    
    And the html: (Sorry about the indentation, when it was not easy using this editor, and I just pasted a part of the code in order to do it as shorter as possible).
    
            <mat-tab-group>   
                    <mat-tab label="settings">
                        <form autocomplete="off" >
                            <ng-template ng-template matTabContent> 
                                <mat-tab-group  [formGroup]="forma">
                                        <mat-tab label="global"> 
                                           // All this fields have are fine
                                         </mat-tab>
    
                                 <mat-tab formGroupName="company" label="company"> 
                                    <div class="card">
                                        <div class="card-header" id="headingTwo">
                                            <h5 class="mb-0">Details</h5>
                                        </div>
                                        <div id="company-details">
                                                <div class="form-group row">
                                                    <div class="col-sm-3">
                                                        <input 
                                                        type="text" 
                                                        class="form-control" 
                                                        id="name" 
                                                        name="name"
                                                        placeholder="Company name"
                                                        formControlName=name>
                                                    </div>
                        
                                                </div>
    
                             <div class="form-group row" formGroupName="msgAccounts">
                                                    <div class="col-sm-6">
                                             
                                                        <input 
                                                        type="text" 
                                                        class="form-control" 
                                                        id="line" 
                                                        name="line"
                                                        placeholder="line"
                                                        formControlName=line>
                                                    </div>
                                                    <div class="col-sm-6">
                                                    
                                                        <input 
                                                        type="text" 
                                                        class="form-control" 
                                                        id="whatsapp" 
                                                        name="whatsapp"
                                                        placeholder="whatsapp"
                                                        formControlName=whatsapp>
                                                    </div>
                                                </div>
    
                                                    
    
                             <div class="form-group row" formGroupName="socialMedia" >
                         
                                                    <div class="col-sm-6">
                                                        <input 
                                                        type="text" 
                                                        class="form-control" 
                                                        id="is" 
                                                        name="is"
                                                        placeholder="Is"
                                                        formControlName=is>
                                                    </div>
                                                </div>                             
                                            </div>
                                       </div>
                                </mat-tab>                 
               </mat-tab-group>  
                            <div class="form-group row">
                            <div class="col-sm-10">
                               <button type="submit" 
                                   (click)="saveConfig()">Save</button>
                            </div>
            </div>
                        
           </ng-template>
          </form>
       </mat-tab>
    </mat-tab-group>