首页 文章

如何使用formControlName并处理嵌套的formGroup？

提问于
浏览 次
11

正如Angular documentation所说我们可以在表单中使用 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 .

无论如何几个月前我问this找出 formControlName 和 [formControl] 之间的区别 .

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

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

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

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

forms angular angular-reactive-forms

2 回答

  • 25

    你可以使用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组成，层次结构可以继续，但在访问值时它非常简单 .

    回复于
  • 9

    是真的 . 看 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>
    回复于

相关问题