在 formArray Angular 中获取值：找不到带有路径的控件

如何解决在 formArray Angular 中获取值：找不到带有路径的控件

我想在 formArray 中获取我的简单表单上的值，但它给了我错误。我尝试过其他解决方案，例如 Bootstap 5 Tooltips Markup，但它不起作用。

这是我的示例代码：this one

    ----- HTML
<div class="form-group" formArrayName="optionGroup">
   <div *ngFor="let data of menuOptions; let i = index">
                    <div [formGroupName]="i" class=" " id="{{i}}">
                      <input
                        formControlName="optionsQty"
                        class="form-input qty qty{{i}}"
                        type="number"
                        id="qty{{i}}"
                        min="1"
                        [(ngModel)]="defaultOptionQtyTotal"
                      />
        
                      <input
                        formControlName="optionsName"
                        class="form-input"
                        type="text"
                        readonly
                        value=" {{data.name}} {{i}}"
                        id="optName{{i}}"
                      />
        
                      $<input
                        formControlName="optionsCost"
                        class="form-input"
                        type="text"
                        readonly
                        value=" {{data.cost}}"
                        id="optName{{i}}"
                      />
                    </div>
            </div>

这里是 .TS

----- TS
 constructor(private builder: FormBuilder) {
    this.form = this.builder.group({
      qtyTotal: this.builder.control("",[
        Validators.required,Validators.min(1)
      ]),optionGroup: this.builder.array([]);
     });
  } //end constructor

解决方法

您可以在类中初始化表单数组。

ngOnInit() {
  this.initFormArray();
}

initFormArray() {
    this.menuOptions.forEach(x => {
      (<FormArray>this.form.get("optionGroup")).push(
        this.builder.group({
          optionsQty: [null],optionsName: [x.name],optionsCost: [x.cost]
        })
      );
    });
  }

您遇到问题，因为您尝试访问 HTML 中的空表单数组。

更新solution.