找不到路径如下的控件:“计划-> 0' [英] Cannot find control with path: 'plans -> 0'

问题描述

我有一个API，可以返回类似的数据，但类是相同的，但条目数却发生了变化.

I have an API that returns the data something like but the class is same but number of entries changes.

HTML文件:

<div class="col-12 col-md-6" formArrayName="plans">
  <div class="form-check" 
      *ngFor="let plan of plans; index as i" [formGroupName]="i">
    <label class="form-check-label fw7 h5 mb0">
      <input class="form-check-input" type="checkbox" formControlName="checkbox">
      {{plan.planCode}}
    </label>

    <label *ngIf="plan.divisions.length > 0">
      Divisions
      <select class="form-control" formControlName="division">
        <option *ngFor="let division of plan.divisions" [value]="division.divisionCode">
          {{division.divisionName}}
        </option>
      </select>
    </label>
  </div>         
</div>

TS文件:

public plans: IPlan[] = new Array<Plan>();
public formControls: {
  firstNameCtrl: FormControl,    
  plans: {
    checkbox: FormControl;
    division: FormControl;
  }[]
};

ngOnInit() {
  this.restSvc.getData("/api/plan/GetPlanDetails")
    .subscribe((data => {
      if (!data.errorMessage) {
        this.plans = data;          
      } else {
        this.errMsg = data.errorMessage;
      }
    }), error => {
      this.errMsg = "We found some errors. Please review the form and make corrections.";
  });

  this.formControls = {
    firstNameCtrl: this.fb.control('', Validators.required),   
    plans: this.plans.map((plan, i) => {
      const divisionCode = plan.divisions.length > 0
        ? plan.divisions[0].divisionCode
        : '';
      return {
        checkbox: this.fb.control(i === 0),
        division: this.fb.control(divisionCode)
      };
    })
  };
}

我遇到错误

无法找到路径为计划-> 0"的控件

Cannot find control with path: 'plans -> 0'

在订阅完成之前要映射计划的位置.该如何解决?

where the plan is getting mapped before the subscribe completes. How to resolve this?

样本数据:

plans = [ 
  { planCode: "B3692", divisions: [] }, 
  { planCode: "B3693", divisions: [] }, 
  { planCode: "B67", 
    divisions: [ 
      { divisionCode: "2", divisionName: "Assisted Living " }, 
      { divisionCode: "1", divisionName: "LILC" }] 
  }, 
  { planCode: "B69", 
    divisions: [ 
      { divisionCode: "3", divisionName: "Four Seasons" }, 
      { divisionCode: "2", divisionName: "Lakeside" }, 
      { divisionCode: "1", divisionName: "Sunrise" } ] 
  } 
];

推荐答案

服务返回数据后，您需要构建表单.

You need to build your form after your service returns the data.

逐步思考ngOnInit函数.

1. 请求数据
2. 构建表单
3. 从空的plans数组构建表单数组
4. 内置HTML

1. Request data
2. Build form
3. Build form array from empty plans array
4. HTML is built

...

1. 服务返回数据
2. 更新plans数组
3. HTML已更新

1. Service returns data
2. Update plans array
3. HTML is updated

您现在遇到的情况是*ngFor="let plan of plans"为每个plan创建一个HTML块，但是您没有向form.plans数组添加任何表单控件.因此，当表单尝试绑定到form.plans中的第一个表单控件时，它找不到任何内容并中断.

You now have a situation where *ngFor="let plan of plans" is creating a block of HTML for each plan, but you haven't added any form controls to your form.plans array. So when the form tries to bind to the first form control in form.plans, it doesn't find anything and breaks.

这里的最终问题是，表单数组始终需要镜像您要从中构建模型的模型，否则数组长度的差异会引起问题.

The ultimate problem here is that your form array always needs to mirror the model you are building it from, otherwise the difference in array lengths is going to cause problems.

据我所知，在等待服务返回计划时显示部分表格没有什么意义.因此，我建议您延迟构建表单，直到获得所有数据为止.您可以通过在订阅内部构建表单来做到这一点.

As far as I can tell, there isn't much point in you displaying a partial form while waiting for the service to return the plans. So I would recommend delaying the building of the form until you have all of the data. You would do this by building the form from inside the subscribe.

// no point in initialising with an empty array
plans: IPlan[];
formControls: {
  firstNameCtrl: FormControl,    
  plans: {
    checkbox: FormControl;
    division: FormControl;
  }[]
};

ngOnInit() {
  this.restSvc.getData("/api/plan/GetPlanDetails").subscribe(plans => {
    if (!plans.errorMessage) {
      this.plans = plans;
      this.buildForm();
    } else {
      this.errMsg = plans.errorMessage;
    }
  }, error => {
    this.errMsg = "We found some errors. Please review the form and make corrections.";
  });  
}

private buildForm(): void {
  this.formControls = {
    firstNameCtrl: this.fb.control('', Validators.required),   
    plans: this.plans.map((plan, i) => {
      const divisionCode = plan.divisions.length > 0
        ? plan.divisions[0].divisionCode
        : '';
      return {
        checkbox: this.fb.control(i === 0),
        division: this.fb.control(divisionCode)
      };
    })
  };

  // TODO: build the form here
}

您现在需要控制将表单添加到DOM的时间，因为在最初构建表单时，您没有将其绑定到的表单.

You will now need to control when your form is added to the DOM, as you won't have a form for it to bind to when it is initially built.

<form *ngIf="form" [formGroup]="form">
  <!-- the form -->
</form>

这篇关于找不到路径如下的控件:“计划-> 0'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！