如何在 FormGroup 中添加动态 formControl答案

【问题标题】：How do add dynamic formControl inside FormGroup如何在 FormGroup 中添加动态 formControl
【发布时间】：2018-02-17 15:13:01
【问题描述】：

这是我以静态方式创建的。我正在使用 Angular 4。

   this.contactForm = this.fb.group({

  firstname: ['', Validators.required],
  lastname: ['', Validators.required],
  zipCode: ['', Validators.required],
  hobbies: this.fb.group({
    hobbies0: ['', Validators.required],
    hobbies1: ['', Validators.required],
    hobbies2: ['', Validators.required],
    hobbies3: ['', Validators.required],
    hobbies4: ['', Validators.required],
    hobbies5: ['', Validators.required]
  }),// want to create these controls using for loop.


})

在 HTML 中

 <form [formGroup]="contactForm " autocomplete="off" (ngSubmit)="onSubmit()">
         <input type="text" formControlName="firstname">
         <input type="text" formControlName="lastname">
         <input type="text" formControlName="zipCode">
         <div formGroupName="hobbies">
            <input type="text" formControlName="hobbies0">
            <input type="text" formControlName="hobbies1">
            <input type="text" formControlName="hobbies2">
            <input type="text" formControlName="hobbies3">
            <input type="text" formControlName="hobbies4">
            <input type="text" formControlName="hobbies5">
         </div>//want to iterate through ngFor
 </form>

所以，我刚刚知道了一种以动态方式创建此类事物的方法，即在 html 和打字稿中使用*ngFor 来创建动态controls。

【问题讨论】：

似乎是 FormArray 的用例

标签： javascript angular forms

【解决方案1】：

例如，您可以这样做：

component.ts

  public hobbiesArr = ['hobbies0', 'hobbies1', 'hobbies2', 'hobbies3', 'hobbies4'];

  ngOnInit() {
    const hobbiesGroup = {}
    this.hobbiesArr.forEach(hobby => {
      hobbiesGroup[hobby] = new FormControl('', Validators.required);
    })

    this.contactForm = this.fb.group({
      firstname: ['', Validators.required],
      lastname: ['', Validators.required],
      zipCode: ['', Validators.required],
      hobbies: new FormGroup(hobbiesGroup)
    })

  }

component.html

     <form [formGroup]="contactForm" autocomplete="off" (ngSubmit)="onSubmit()">
      <input type="text" placeholder="firstname" formControlName="firstname">
      <input type="text" placeholder="lastname" formControlName="lastname">
      <input type="text" placeholder="zipCode" formControlName="zipCode">

      <div formGroupName="hobbies">
        <input *ngFor="let hobby of hobbiesArr" [placeholder]="hobby" type="text" [formControlName]="hobby">
      </div>

      <button type="submit">Submit</button>
      
     </form>

【讨论】：

收到错误Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
你导入ReactiveFormsModule了吗？
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
生活中的问题仍然存在。