如何在angular中动态添加输入字段

我有一个角度反应形式，我想在点击按钮时添加到字段中。到目前为止，我可以添加按钮点击字段，它的工作。但有两个问题我并不真正理解，也不知道

问题是，我只能写一封信，然后它就不会继续了

问题是，在我关闭表单所在的模式后，我希望重置完整的表单。我是在保存时做的，对于输入的值它是有效的。但不适用于添加的输入字段。他们总是留下来

有人能看一下，给我一个指针吗

这是我初始化表单的ts文件：

    ngOnInit() {
    this.materialAddForm = this.fb.group({
        name: new FormControl(''),
        materialCode: new FormControl(''),
        materialType: new FormControl(''),
        quantity: new FormControl(''),
        buyInformation: this.fb.array([])
    })
  }


  saveMaterial() {
      this.materialService.addMaterial(this.materialModel).subscribe(console.log) ;
      this.materialAddForm.reset()

      console.log(this.materialModel)

  }

  addSellerInput() {
    const buyInformation = this.materialAddForm.controls.buyInformation as FormArray;
    buyInformation.push(this.fb.group({
      seller: new FormControl(''),
      price: new FormControl(''),
    }));
  }

这是我的html（仅相关部分）：

卖方名称
价格

我不知道，为什么您同时将

[（ngModel）]

与

表单组一起使用

更新：
您无法重置表单的唯一原因是，您正在使用[（ngModel）]。“只是猜测”

您只重置了反应式表单（“materialAddForm”），而不是模板驱动表单（“ngModel”）

这就是为什么你的价值总是存在的原因

您可以在这里查看一个示例：
我不知道，为什么您同时将
[（ngModel）]
与
表单组一起使用

更新：
您无法重置表单的唯一原因是，您正在使用[（ngModel）]。“只是猜测”

您只重置了反应式表单（“materialAddForm”），而不是模板驱动表单（“ngModel”）

这就是为什么你的价值总是存在的原因

您可以在这里查看一个示例：
为什么使用[（ngModel）]=“materialModel.price”作为反应形式？您可以删除它并尝试。我使用ngModel的原因是我想将输入值与模型连接起来，然后将其发送回后端，否则我不知道如何操作。你有更好的解决方案吗？我刚刚删除了所有地方的ngModel，但仍然有同样的错误，为什么你使用反应式形式的[（ngModel）]=“materialModel.price”？您可以删除它并尝试。我使用ngModel的原因是我想将输入值与模型连接起来，然后将其发送回后端，否则我不知道如何操作。你有更好的解决方案吗？我刚刚删除了ngModel，但仍然犯了同样的错误。是的，我犯了这个错误，不是ngModel，但如果你将模板驱动的表单混合在反应式表单中，它会变得太混乱，你需要知道其中的区别非常重要。如果为示例制作动态表单时，在formgorups或控件的formArray中有一个formgroup=mainform。每次你点击按钮按钮控制formarray。我使用ngModel的原因是我想将输入值与我的模型连接起来，并将其发送回我的后端，否则我不知道如何操作。你有更好的解决方案吗？我刚刚删除了ngModel，但仍然犯了同样的错误。你可以试试我的例子，它是有效的。是的，我犯了这个错误，不是ngModel，但如果你将模板驱动的表单混合在反应式表单中，它会变得太混乱，你需要知道其中的区别非常重要。如果为示例制作动态表单时，在formgorups或控件的formArray中有一个formgroup=mainform。每次你点击按钮按钮控制formarray。我使用ngModel的原因是我想将输入值与我的模型连接起来，并将其发送回我的后端，否则我不知道如何操作。你有更好的解决方案吗？我刚刚删除了ngModel，但仍然有同样的错误。你可以试试我的例子，它正在工作。
<div  class="form-row mb-4" formArrayName="buyInformation"
                       *ngFor="let buyInformation of materialAddForm.controls['buyInformation']?.value; let i = index">


              <div class="input-group input-group-sm col-12 col-md-6 mb-4" [formGroupName]="i">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="sellerName">Seller Name</span>
                  </div>
                  <input type="text" class="form-control" aria-label="Sizing example input"
                         aria-describedby="inputGroup-sizing-sm"
                         formControlName="seller"
                         >
                </div>

                <div class="input-group input-group-sm col-12 col-md-6 mb-4" [formGroupName]="i">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="materialUnitPrice">Price</span>
                  </div>
                  <input type="text" class="form-control" aria-label="Sizing example input"
                         aria-describedby="inputGroup-sizing-sm"
                         formControlName="price"
                         [(ngModel)]="materialModel.price" name="price">
                </div>
              </div>
            </div>