Question

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

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”的控件

在订阅完成之前映射计划的位置。该如何解决？

样本数据：

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

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

逐步思考您的ngOnInit函数。

请求数据
构建表单
从空的plans数组构建表单数组
内置HTML

...

服务返回数据
更新plans数组
HTML已更新

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

该如何解决？

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

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

// 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>

找不到路径如下的控件：“计划-> 0”

1 个答案:

该如何解决？