Angular FormGroup：无法在 angular 11

问题描述

我正在尝试根据要求动态生成表单，但它给出了一个错误，表明无法通过路径找到控件：

在这里，我根据该列表从 API 获取列表，我正在尝试动态生成复选框并将它们添加到表单组，但出现错误，请参阅下面的相同代码

这是组件的代码：

export class QualificationExpcomponent implements OnInit {
  
  jobmasterList: any = [];
  checkBoxform1: FormGroup;
  public jobcount = 0;

  constructor(private formBuilder: FormBuilder,private callapi: ServiceService,private _router: Router) { }

  ngOnInit(): void {
   
    this.addCheckBoxes();
    this.initializecheckBoxform1();

    this.callapi.getDetails().subscribe(res => {
      if (res.data !== null) {
        this.jobmasterList = res.data.jobs;
        this.categoriesList = res.data.jobs[0].category;
        this.subcatList = res.data.jobs[0].category[0].sub_category;
        console.log(this.subcatList)
      }
    })
  }
 
  }
  initializecheckBoxform1() {
    this.checkBoxform1 = this.formBuilder.group({
      orders: new FormArray([],this.minSelectedCheckBoxes(1))
    });
  }
  minSelectedCheckBoxes(min = 1) {
    const validator: ValidatorFn = (formArray: FormArray) => {
      const totalSelected = formArray.controls
        // get a list of checkBox values (boolean)
        .map(control => control.value)
        // total up the number of checked checkBoxes
        .reduce((prev,next) => next ? prev + next : prev,0);

      // if the total is not greater than the minimum,return the error message
      return totalSelected >= min ? null : { required: true };
    };
    return validator;
  }
  get ordersFormArray() {
    return this.checkBoxform1.controls.orders as FormArray;
  }

  private addCheckBoxes() {
    this.jobmasterList.forEach(() => this.ordersFormArray.push(new FormControl(false)));
  }
  get sf() {
    return this.salaryexpForm.controls;
  }
  get rf() {
    return this.remunerationForm.controls;
  }

 
  SelectePrevExperience() {
    const selectedOrderIds = this.checkBoxform1.value.orders
    .map((v,i) => v ? this.jobmasterList[i].id : null)
    .filter(v => v !== null);
  console.log(selectedOrderIds);
  console.log(this.checkBoxform1.value);
  }
  checkBoxform1submit() {
   console.log(this.checkBoxform1.value);
  }
}

这是我试图绑定数据的 HTML 组件 表单控件名称：

<span formArrayName="orders" *ngFor="let master of jobmasterList; let i = index">
                    <div *ngIf="i === jobcount">
                    <span class="TextMaroonBold" style="color: #1c8bea;font-weight: bold;"> {{master.description}}
                    </span><br>
                    <span *ngFor="let order of master.category; let j = index">
                        <input type="text" value="{{order.category_id}}" [formControlName]="j" style="display: none;">
                        <span class="TextMaroonBold"> {{order.name}}
                        </span>
                        <div class="ex1">
                            <span *ngFor="let option of order.sub_category; let k = index" class="checkBox">
                        
                                <div class="form-check" style="padding-left: 35px;">
                                        <input type="checkBox" value="{{option.ref_id}}" [formControlName]="k">
                                        {{option.name}}
                                    
                                </div>
                        
                            </span>
                        </div>
                    </span>
                </div>
                </span>

在控制台中，我看到以下错误：

ERROR Error: Cannot find control with path: 'orders -> i'

解决方法

首先，您应该用 fromControlName 包围您的所有 [] 属性，如Angular Binding Syntax 中所述：

<input type="checkbox" value="{{option.ref_id}}" [formControlName]="i">

其次，您的 HTML 中有嵌套循环，您必须为每个嵌套循环更改变量索引 i：

<div *ngFor="...; let i = index">
    <div *ngFor="...; let j = index"></div>
</div>