首页 > 解决方案 > 如何修复错误:找不到带有角度路径的控件

问题描述

这是列表 html list.component.html中的代码

<div nz-row formArrayName="tasks">
          <ng-container *ngFor="let tasks of getTasks(taskFormGroup);let i = index">
            <div nz-col nzXXl="12">
              <div nz-col nzSpan="8">
                <label [textContent]="tasks?.value?.task?.name"></label>
              </div>
              <div nz-col nzSpan="8">
                <nz-form-item>
                  <nz-form-control>
                    <nz-radio-group [formControlName]="tasks.get('failed')">
                      <label nz-radio nzValue="true">Passed</label>
                      <label nz-radio nzValue="false">Failed</label>
                    </nz-radio-group>
                  </nz-form-control>
                </nz-form-item>
              </div>
<div nz-col nzSpan="8">
            <nz-form-item>
              <nz-form-control>
                <textarea nz-input formControlName="remarks" placeholder="Placeholder" class="remarks-textarea"
                  type="text"></textarea>
              </nz-form-control>
            </nz-form-item>
          </div>
            </div>
          </ng-container>
        </div>

来自列表打字稿 list.component.ts的代码

createTaskFormGroup() {
    const list = this.store.selectSnapshot(ConfigurationState.get('collections'));

    const formArray: any = [];
    if (Array.isArray(list.checklists)) {

      list.checklists.map((data: any) => {
        data.tasks.forEach((task: any) => {
          formArray.push({
            failed: false,
            remarks: '',
            task: task
          });
        });
      });
    }

    console.log(formArray, '+++');
    return this.fb.group({
      remarks: new FormControl(['', [Validators.required]]),
      tasks: this.fb.array([formArray])
    });
  }

  getTasks(form: any) {
    return form.controls.tasks.controls;
  }

如何修复错误ERROR Error: Cannot find control with path: 'tasks -> ',该错误<nz-radio-group [formControlName]="tasks.get('failed')">也适用于无法通过路径找到控件的文本区域

错误在nz-radio-group哪里cannot find control with path:

提前致谢。

标签: javascriptangulartypescript

解决方案


您必须将 ngFor 包装在formArrayName中

<div formArrayName="tasks"> 
   <ng-container *ngFor="let tasks of getTasks(taskFormGroup);let i = index">
   ....

</div>

推荐阅读