找不到路径为：'plans -> 0' 的控件

Question

我有一个 API，returns 数据类似，但 class 相同，但条目数发生变化。

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)
      };
    })
  };
}

我遇到错误

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

计划在订阅完成之前被映射到哪里。如何解决？

示例数据：

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" } ] 
  } 
];

Answer 1

您需要在服务 return 数据后构建表单。

分步考虑您的 ngOnInit 功能。

请求数据
建筑形式
从空 plans 数组构建表单数组
HTML建成

...

服务return数据
更新plans数组
HTML 已更新

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

如何解决这个问题？

这里的最终问题是您的表单数组始终需要反映您正在构建它的模型，否则数组长度的差异会导致问题。

据我所知，在等待 return 计划服务时显示部分表格没有多大意义。所以我建议推迟构建表单，直到您拥有所有数据。您可以通过从订阅内部构建表单来完成此操作。

// 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，因为您在最初构建时没有要绑定的表单。

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

找不到路径为：'plans -> 0' 的控件

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

angular

angular7

angular8

如何解决这个问题？