Question

我正在使用反应形式方法。我有一个表单（父组件称为：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的静态函数创建了该FormGroup。我该如何解决这个问题？

Answer 1

在您的 DeductionInvoiceItemComponent 中，您拥有：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vertical-menu">
                    <ul>
                        <li class="active">
                          <h3>Home</h3>
                        </li>
                        <li>
                            <h3>Document Missing
                                <span class="plus">+</span>
                            </h3>

                            <ul>
                                <li>
                                    <a href="#">Reports</a>
                                </li>
                                <li>
                                    <a href="#">Search</a>
                                </li>
                                <li>
                                    <a href="#">Graphs</a>
                                </li>
                                <li>
                                    <a href="#">Settings</a>
                                </li>
                            </ul>
                        </li>
                        <!-- we will keep this LI open by default -->
                        <li>
                            <h3>Documents Submitted
                                <span class="plus">+</span>
                            </h3>

                            <ul>
                                <li>
                                    <a href="#">Today's tasks</a>
                                </li>
                                <li>
                                    <a href="#">Urgent</a>
                                </li>
                                <li>
                                    <a href="#">Overdues</a>
                                </li>
                                <li>
                                    <a href="#">Recurring</a>
                                </li>
                                <li>
                                    <a href="#">Settings</a>
                                </li>
                            </ul>
                        </li>

但是您没有从父组件将其作为输入传递。添加它：

@Input()
  public item: FormGroup;

错误：formGroup需要一个FormGroup实例-在将新组件添加到formArray

1 个答案: