如何使用formControlName 处理嵌套的formGroup? [英] How to use formControlName and deal with nested formGroup?

查看：27
本文介绍了如何使用formControlName 处理嵌套的formGroup?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

英雄详情
<h3><i>FormGroup中的FormControl</i></h3><form [formGroup]="heroForm" novalidate><div class="form-group"><label class="center-block">名称:<input class="form-control" formControlName="name">

</表单>

正如他们所说...

<块引用>

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

无论如何，几个月前我问这个formControlName 和 [formControl] 有什么区别.

现在我的问题是:如何将 formControlName 与嵌套的 FormGroup 结合使用?

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

this.myForm = fb.group({'全名': ['', Validators.required],'性别': []，'地址':fb.group({'街道': ['']，'门牌号码': ['']，'邮政编码': ['']})});

使用 formControlName 将street"(或houseNumber"或postalCode")绑定到相关 HTML 元素的正确方法是什么?

解决方案

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

this.myForm = fb.group({'全名': ['', Validators.required],'性别': []，'地址':fb.group({'街道': ['']，'门牌号码': ['']，'邮政编码': ['']})});

模板:

<form [formGroup]="myForm" ><div class="form-group"><label for="fullname">用户名</label><input type="text" id="username" formControlName="fullname" class="form-control">

<div class="radio" *ngFor="让性别的性别"><标签><input type="radio" formControlName="gender" [value]="gender">{{gender }} </label>

<div formGroupName="地址"><div class="form-group"><label for="street">用户名</label><input type="text" id="username" value="street" formControlName="street" class="form-control">

<div class="form-group"><label for="houseNumber">用户名</label><input type="text" id="username" value="street" formControlName="houseNumber" class="form-control">

<div class="form-group"><label for="postalCode">用户名</label><input type="text" id="username" value="street" formControlName="postalCode" class="form-control">

</表单>

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

As Angular documentation says we can use formControlName in our forms:

<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>

As they say...

Without a parent FormGroup, [formControl]="name" worked earlier because that directive can stand alone, that is, it works without being in a FormGroup. With a parent FormGroup, the name input needs the syntax formControlName=name in order to be associated with the correct FormControl in the class. This syntax tells Angular to look for the parent FormGroup, in this case heroForm, and then inside that group to look for a FormControl called name.

Anyway some months ago I asked this to figure out what is the difference between formControlName and [formControl].

Now my question is: what about use formControlName with nested FormGroups?

For example, if I have the following form structure:

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

What is the right way to bind "street" (or "houseNumber" or "postalCode") to related HTML elements using formControlName?

解决方案

you can use Form group which is basically a collection of controls ( controls mean the fields given in your html form) define in your typescript syntax and binded to your HTML elements using the formControlName directive ,for example 

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

Template:

<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>

A formGroup can consist of a nested formGroup and hierarchy can continue on ,but in accessing the value the its fairly simple .

这篇关于如何使用formControlName 处理嵌套的formGroup?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆