Angular 在NGFORQUOTE中创建表单

我正试图从列表中创建一个每个元素都具有可编辑表单的页面

我试图在一个*NgFor报价中包含不同的FormControlName。因为每个元素都有自己的formcontrolname。问题是，我只有一个formcontrolname，每次编辑任何其他元素时，表单值总是只有一个值

角度版本：9.0.7

有人知道怎么做吗

TS

HTML

{{prd.name}
{{prd.summary}
RD{{prd.value |货币：'USD'}}/单位
{{珠三角销售}
-
+
添加

    export class ProductCardComponent implements OnInit {

  @Input() products: Product[];

  qtdPrd: number = 0;
  form: FormGroup;
  formArray: FormArray; 


  constructor( private $fb: FormBuilder ) {

    this.formArray = new FormArray([ ])

    this.form = this.$fb.group({
      qtdProd: '',
      formArr: this.formArray
    });
    
   }


  ngOnInit(): void {
    this.products.forEach(element => {
      const elArr =  this.$fb.group({
        qtdProd: ''
      })
      this.formArray.push(elArr);
    });
  }

  addValue(){
    this.qtdPrd++;
    console.log("forms Arr", this.formArray);
    console.log("forms", this.form);
  }

  subValue(){
    this.qtdPrd--;  
  }

<ng-container>

    <mat-card *ngFor="let prd of products; let i=index;" class="m-3 product-card">

        <img class="mb-4" src="/assets/img/{{prd.image}}" height="200px" width="60px">

        <span id="title-prod">{{prd.name}}</span>

        <span class="pb-2" id="summary-prod">{{prd.summary}} <img width="12px" src="/assets/img/rec.png" *ngIf="prd.recyclable"></span>

        <span class="pb-3" id="price-prod">RD{{prd.value | currency:'USD'}}/Unit</span>

        <span id="promo-prod">{{prd.sale}}</span>

        <a class="fontw-500" id="detail-prod" href="blank">View Details</a>

        <div class="row d-flex mt-5">
            <div class="plus-minus mr-2" (click)="subValue()">
                <span class="plus-minus-text">-</span>
            </div>

            <form [formGroup]="form">
                <mat-form-field class="input-qtd mr-2" appearance="outline">
                    <input formControlName="qtdProd" inputmode="numeric" pattern="[0-9]*" type="number" matInput value="qtdPrd">
                </mat-form-field>

            </form>

            <div class="plus-minus" (click)="addValue()">
                <span class="plus-minus-text">+</span>
            </div>
            <button mat-raised-button class="ml-3" id="btn-add">ADD</button>
        </div>


    </mat-card>
</ng-container>