Question

我正在使用角度反应形式，但在将 formGroup 数据从父组件传递到子组件时遇到了一些问题。这是我得到的错误

<块引用>

  [96msrc/app/invoice-form/invoice-form.component.html[0m:[93m3[0m:[93m103[0m

[91merror[0m[90m TS2740: [0mType 'AbstractControl' 缺少来自类型 'FormGroup' 的以下属性：控件， registerControl、addControl、removeControl 等 3 个。

[7m3[0m [7m [0m [91m


 
[96msrc/app/invoice-form/invoice-form.component.ts[0m:[93m9[0m:[93m16[0m
    [7m9[0m   templateUrl: './invoice-form.component.html',
    [7m [0m [96m               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~[0m
    Error occurs in the template of component InvoiceFormComponent.

父组件

import { Component, OnInit } from '@angular/core';
    import { FormArray, FormControl, FormGroup } from '@angular/forms';
    import { FormItemComponent } from './form-item/form-item.component';
    
    

@Component({
  selector: 'app-invoice-form',
  templateUrl: './invoice-form.component.html',
  styleUrls: ['./invoice-form.component.css']
})
export class InvoiceFormComponent implements OnInit {

  public invoiceFormItems: FormGroup = new FormGroup({
    item:new FormControl(''),
    quantity:new FormControl(''),
    price:new FormControl(''),
    total:new FormControl(''),
  });
  constructor() { }

  ngOnInit(): void {
    this.createInvoiceItemForm();
  }

  public createInvoiceItemForm(): void 
  {
    this.invoiceFormItems = new FormGroup({
      items : new FormArray([
        FormItemComponent.addInvoiceItem(),
        FormItemComponent.addInvoiceItem(),
      ])
    });
  }
  get getInvoiceItem():FormArray {
    return this.invoiceFormItems?.get('items') as FormArray;
  }
  public submitInvoiceForm()
  {
  
  }

  public addNewInvoiceItems()
  {
    this.getInvoiceItem.push(FormItemComponent.addInvoiceItem());
  }
}

父组件html模板

<form class="form " class="mt-2" autocomplete="off" [formGroup]="invoiceFormItems" (ngSubmit)="submitInvoiceForm()">

    <app-form-item *ngFor = "let formItem of getInvoiceItem.controls; let i = index" [indexId] = "i" [invoiceFormItem] = "formItem" >
      
    </app-form-item>
    
    <div class="form-group">
        <div class="col p-0">
            <button class="btn btn-primary" type="submit" (click)="addNewInvoiceItems()" [disabled]="!invoiceFormItems.valid"><i class="bx bx-plus"></i>
                Add
            </button>
        </div>
    </div>
    <button type="submit">Submit</button>
</form>

子组件

import { Component, Input } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-form-item',
  templateUrl: './form-item.component.html',
  styleUrls: ['./form-item.component.css']
})
export class FormItemComponent {

  @Input() public invoiceFormItem: FormGroup = new FormGroup({
    item: new FormControl(''),
    quantity: new FormControl(''),
    price: new FormControl(''),
    total: new FormControl('')
  });

  constructor() { }
  static addInvoiceItem(): FormGroup {
    return new FormGroup({
      item: new FormControl(''),
      quantity: new FormControl(''),
      price: new FormControl(''),
      total: new FormControl('')
    });
  }
}

子 html 模板

<div [formGroup] = "invoiceFormItem"  >
<div class="mt-4">
  <div class="row justify-content-between">
    <div class="col-md-2 col-sm-12 form-group">
      <label for="item-name">Item</label>
      <input type="txt" class="form-control" id="item-name" name="item" formControlName="item" placeholder="Enter Item">
    </div>
    <div class="col-md-2 col-sm-12 form-group">
      <label for="quantity">Quantity</label>
      <input type="number" class="form-control" id="quantity"  name ="quantity" formControlName="quantity" placeholder="Enter Quantity">
    </div>
    <div class="col-md-2 col-sm-12 form-group">
      <label for="price">Price</label>
      <input type="number" class="form-control" id="price"  name ="price" formControlName="price" placeholder="Item Price">
    </div>
    <div class="col-md-2 col-sm-12 form-group">
      <label for="total">Total</label>
      <input type="number" class="form-control" id="total" name ="total" formControlName="total" placeholder="Item Total Amount">
    </div>
    <div class="col-md-2 col-sm-12 form-group d-flex align-items-center pt-4">
      <button class="btn btn-danger"  type="button"> <i class="fa fa-trash"></i>
      </button>
    </div>
  </div>
  <hr>
</div>  
</div>

问题是我不能在这里绑定自定义属性来传递数据（FormGroup）

 <app-form-item *ngFor = "let formItem of getInvoiceItem.controls; let i = index" [invoiceFormItem] = "formItem" >
      
    </app-form-item>

为什么在绑定子组件的自定义属性时会发生该错误，我做错了什么吗？任何帮助将不胜感激。谢谢

Answer 1

Angular（真的是打字稿）不知道你的“formItem”，唯一的就是创建一个像

getGroup(index){
  return (this.invoiceFormItems.get('items') as FormArray)
               .at(index) as FormGroup
}

像传球

<app-form-item *ngFor = "let formItem of getInvoiceItem.controls; 
       let i = index" [indexId] = "i" [invoiceFormItem] = "getGroup(i)">

角度反应形式无法将数据传递给子组件

1 个答案: