javascript - 找不到带有角度路径的控件

Question

我正在使用 Angular 6 应用程序并使用动态表单。

app.component.html：

   <form (ngSubmit)="onSubmit()" [formGroup]="form">
    <div formArrayName="multiDynamic">
      <!-- row -->
      <div *ngFor="let record of form.controls.multiDynamic.controls; let i=index">
            <div class="row" [formGroupName]="i">
                <div class="col-md-6" *ngFor="let question of model.questions">
                    <div [ngSwitch]="question.controlType">
                        <div class="form-group form-black label-floating">
                            <label class="control-label">{{question.text | titlecase}} </label>
                            <div *ngSwitchCase="'textbox'"><input type="text" class="form-control" [formControlName]="question.key"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    <button type="submit> Submit </button>
  </form>

app.component.ts：从'@angular/core'导入{组件，OnInit，输入}；从“@angular/forms”导入 { FormBuilder、FormGroup、Validators、FormControl、FormArray }；

export class AppComponent implements OnInit {
 @Input() model: any;
form: FormGroup;

ngOnInit() {

this.sharedService.getData().subscribe(data => {
  this.items = data;
  console.log(this.items);
});

this.form = this.fb.group({
        multiDynamic: this.fb.array([
          this.model.toGroup()
        ])
      });
  }

}

console.log(model.questions) 给出以下（扩展数组），

0:Textbox {controlType: "textbox", key: "url-links", text: "url-links"}
1:Textbox {controlType: "textbox", key: "//input[@id='rcmloginuser']", text: "//input[@id='rcmloginuser']"}
2:Textbox {controlType: "textbox", key: "//input[@id='rcmloginpwd']", text: "//input[@id='rcmloginpwd']"}
3:Textbox {controlType: "textbox", key: "//input[@id='rcmloginsubmit'] ", text: "//input[@id='rcmloginsubmit'] "}

我正在使用上面的 html 和 ts 文件，如果我给出这一行，

<input id="i" type="text" class="form-control" [formControlName]="question.text">

我收到错误消息， 找不到带有路径的控件：'multiDynamic -> 0 -> url-links'

在标签中，

<label class="control-label"> {{question.text | titlecase}} </label>

文本值正在显示，但如果我在输入框中给出 formControlName，那么我会收到此错误。

我正在使用角度的动态形式。

this.model.toGroup()有以下内容，

export class DynamicFormMultiModel {
    questions = [];
multiDataResponse: any = [];
form: FormGroup;

toGroup() {
    const group: any = {};
    this.questions.forEach((question) => {
        group[question.key] = new FormControl('');
    });

    return new FormGroup(group);
}

    patchData() {
        const arrayGroup: any = {};
        const dataRes: any = [];
        const resObj: any = {};

        // this.multiDataResponse.forEach((element, index) => {
        //     this.questions.forEach((question, inx) => {
        //             arrayGroup[question.key] = new FormControl(element[question.key]);
        //     });
        // });
        resObj['data'] = this.multiDataResponse;

    // return new FormGroup(arrayGroup);
    return resObj;
    }
}

由于我有嵌套代码，我无法发布整个代码，但我正在获取数据并将其显示在标签中，但输入标签抛出错误。（两者都包含相同的值question.text）。

附上场景截图。

请帮我解决这个卡在里面太久的问题..

标签： javascriptangularformstypescriptangular4-forms