如何使用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': ['']
    })
});

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

Answer 1

你可以使用Form组,它基本上是一组控件(控件意味着你的html表单中给出的字段)在你的typescript语法中定义,并使用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')">

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

快乐编码！