ERROR Error: Cannot find control with name:

Question

我正在尝试使用表单数组提交反应式表单，我已经尝试过其他线程的解决方案，但 none 对我有用，我觉得我遗漏了一些东西。确切的错误是错误错误：找不到名称为 'stepName' 的控件和错误错误：找不到名称为 'stepDesc' 的控件。这是一个示例代码： Html:

<div formArrayName="knowSteps" cdkDrag *ngFor="let formGroup of knowSteps.controls; let i = index">
            <div [formGroup]="knowSteps.controls[i]">
              <mat-accordion>
                <mat-expansion-panel class="step-expand">
                  <mat-expansion-panel-header cdkDragHandle class="drag-drop">
                    <p>{{steptitle.value == '' ? 'Step' : steptitle.value}}</p>
                  </mat-expansion-panel-header>
                  <div clas="row">
                    <div class="col-md-12  p-3 mb-2 step-name" >
                      <mat-form-field appearance="outline">
                        <mat-label>Step Name</mat-label>
                        <input matInput formControlName="stepName" name="stepName" #steptitle>
                      </mat-form-field>
                    </div>
                  </div>
                  <div clas="row">
                    <div class="col-md-12  p-3 mb-2 step-description">
                      <mat-form-field appearance="outline">
                        <mat-label>Step Description</mat-label>
                        <textarea matInput formControlName="stepDesc" name="stepDesc"></textarea>
                      </mat-form-field>
                    </div>
                  </div>

请忽略表单中未关闭的 div。

  ngOnInit() {
    this.knowhowForm = this.formBuilder.group({
    knowSteps: this.formBuilder.array(
     [[this.knowledgeStepsForm()]],
  )
});

  knowledgeStepsForm() {
    return this.formBuilder.group({
    stepName: new FormControl('', [Validators.required]),
    stepDesc: new FormControl('', [Validators.required]),
  })
}

 get knowSteps(): FormArray {
   return this.knowhowForm.get('knowSteps') as FormArray;
 }

我的提交表单：

createKnowledge(){
   this.newKnowledge.knowledge_steps = this.knowhowForm.get('knowSteps').value;
}

我只放置了表单的这一部分，因为这是唯一不起作用的部分。提前谢谢你。

Answer 1

this.formBuilder.group({
    stepName: new FormControl('', [Validators.required]),
    stepDesc: new FormControl('', [Validators.required]),
  })

应在达到 ngAfterViewInit 之前调用。通常在constructor/ngOnInit.

ERROR Error: Cannot find control with name:

ERROR Error: Cannot find control with name:

angular

angular-reactive-forms

formarray