在 Angular 2 中动态创建输入字段

Question

我正在做一个 Angular 4.X 项目，我试图在单击按钮时创建一些 HTML 输入字段（主要是文本类型）。我正在使用 Angular 反应形式并尝试使用 Angular FormArray 来实现这一点。我已经在 plunker 上写了代码，但它显示了一些错误。

以下是我创建的 plunk 的 link -- http://plnkr.co/edit/PCFD43GK91zo2ivQ9lf7?p=preview

为了便于参考，请在下面找到代码 --

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `<hr>
              <div>  
                <form [formGroup]="orderForm" (ngSubmit)="OnSubmit(orderForm.value)">
                  <div>
                    <input type="text" formControlName="customerName"/>
                    <input type="text" formControlName="email"/>
                  </div>
                  <div formArrayName="items" *ngFor="let item of orderForm.get('items').controls; let i = index;">
                    <div [formGroupName]="i">
                      <input type="text" formControlName="name" placeholder="Item name"/>
                      <input type="text" formControlName="description" placeholder="Item description"/>
                      <input type="text" formControlName="price" placeholder="Item price"/>
                    </div>
                    Chosen name: {{ orderForm.controls.items.controls[i].controls.name.value }}
                  </div>
                  <button type="submit">Save</button>
                  <button type="button" (click)="addItem()">Add More</button>
                </form>
              <div>`,
})

export class App {

  constructor(private fb: FormBuilder) {  }

  public items:any[];
  public orderForm: FormGroup;



  ngOnInit() {
      this.orderForm = this.formBuilder.group({
        customerName: '',
        email: '',
        items: this.formBuilder.array([ this.createItem()])
      });
  }

 createItem(): FormGroup {
    return this.formBuilder.group({
      name: '',
      description: '',
      price: ''
    });
  }

  addItem(): void {
  this.items = this.orderForm.get('items') as FormArray;
  this.items.push(this.createItem());
  }

  public OnSubmit(formValue: any) {
        console.log(formValue);
    }

}

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

如果有人能找出问题所在，我将不胜感激。

Answer 1

您正在导入 private fb: FormBuilder，但在此之后尝试调用 this.formBuilder.something。将其更改为 this.fb.something

如果还是不行，试试把你的代码从ngOnInit直接放到构造方法中。

Answer 2

您的 orderForm 项目需要 getter，FormBuilder 的变量名称应该是 'fb' 您在构造函数中声明的名称或 'formBuilder' 您在任何地方使用的名称

Fixed plunker

export class App {

  constructor(private formBuilder: FormBuilder) {  }

  public orderForm: FormGroup;



  ngOnInit() {
      this.orderForm = this.formBuilder.group({
        customerName: '',
        email: '',
        items: this.formBuilder.array([ this.createItem()])
      });
  }

 createItem(): FormGroup {
    return this.formBuilder.group({
      name: '',
      description: '',
      price: ''
    });
  }

   get items(): FormArray {
    return this.orderForm.get('items') as FormArray;
  };

  addItem(): void {
  this.items.push(this.createItem());
  }

  public OnSubmit(formValue: any) {
        console.log(formValue);
    }

}

html代码

<div>  
                <form [formGroup]="orderForm" (ngSubmit)="OnSubmit(orderForm.value)">
                  <div>
                    <input type="text" formControlName="customerName"/>
                    <input type="text" formControlName="email"/>
                  </div>
                  <div formArrayName="items" *ngFor="let item of items.controls; let i = index;">
                    <div [formGroupName]="i">
                      <input type="text" formControlName="name" placeholder="Item name"/>
                      <input type="text" formControlName="description" placeholder="Item description"/>
                      <input type="text" formControlName="price" placeholder="Item price"/>
                    </div>
                    Chosen name: {{ orderForm.controls.items.controls[i].controls.name.value }}
                  </div>
                  <button type="submit">Save</button>
                  <button type="button" (click)="addItem()">Add More</button>
                </form>
              <div>

在 Angular 2 中动态创建输入字段

Create Input fields dynamically in Angular 2

angular

angular2-forms

angular2-formbuilder