代码之家  ›  专栏  ›  技术社区  ›  XardasLord

错误:在将新组件添加到formArray时,formGroup需要一个formGroup实例

  •  0
  • XardasLord  · 技术社区  · 7 年前

    我用的是反应形式的方法。我有一个表单(父组件名为: DeductionInvoicesComponent ):

    <form [formGroup]="deductionForm">
          <div formArrayName="items" class="well well-lg">
            <app-deduction-invoice-item
              *ngFor="let item of deductionForm.get('items')?.controls; let i=index"
              [index]="i"
              (removed)="deductionForm.get('items').removeAt($event)">
            </app-deduction-invoice-item>
          </div>
    </form>
    <button type="button" class="btn btn-primary" (click)="addItem()">Add an item</button>
    

    父级的TypeScript如下:

    export class DeductionInvoicesComponent implements OnInit {
    
      deductionForm: FormGroup;
    
      constructor(private fb: FormBuilder) { }
    
      ngOnInit() {
        this.deductionForm = this.fb.group({
          items: this.fb.array([])
        });
      }
    
      addItem(){
        let control = <FormArray>this.deductionForm.controls.items;
        control.push(DeductionInvoiceItemComponent.buildItem());
      }
    }
    

    表单可以包含多个 DeductionInvoiceItemComponents 作为一个 formArray . 子组件(单个项称为: DeductionInvoiceItemComponent )如下所示:

    <div class="row" [formGroup]="item">
        <div class="form-group col-4">
          <label class="center-block">Title</label>
          <select class="form-control" formControlName="title">
            <option value="test">test</option>
          </select>
        </div>
        <div class="form-group col-4">
          <label class="center-block">Invoice Number</label>
      <input class="form-control" formControlName="invoiceNumber">
    </div>
    <button (click)="removed.emit(index)" type="button" class="close text-danger" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    

    而表示formArray项的单个组件的TypeScript如下所示:

    export class DeductionInvoiceItemComponent {
    
      @Input()
      public index: number;
    
      @Input()
      public item: FormGroup;
    
      @Output()
      public removed: EventEmitter<number> = new EventEmitter<number>();
    
      static buildItem() {
        return new FormGroup({
          title: new FormControl('', Validators.required),
          invoiceNumber: new FormControl('', Validators.required),
          grossAmount: new FormControl('', Validators.required)
        });
      }
    }
    

    当我点击一个按钮 addItem() 我收到以下错误消息:

    错误:formGroup需要一个formGroup实例

    我使用名为 buildItem 如你所见。我怎样才能解决这个问题?

    1 回复  |  直到 7 年前
        1
  •  2
  •   dAxx_    7 年前

    在你的 演绎Invoiceitem组件 你有:

    @Input()
      public item: FormGroup;
    

    但您没有将其作为父组件的输入传递。添加:

    <app-deduction-invoice-item
              *ngFor="let item of deductionForm.get('items')?.controls; let i=index"
              [index]="i"
              [item]='item' // <-- HERE
              (removed)="deductionForm.get('items').removeAt($event)">
    </app-deduction-invoice-item> 
    
    推荐文章