如何根据 angular 7 中的 API 响应制作动态表单？

Question

我在angular 7 中做动态表单，我按照angular 官方网站上提到的方式进行了操作。我成功地实施了该教程，但我的情况有所不同。表单中会有什么样的输入，它的所有属性将来自 API 响应

这是服务中的功能，它带来了我的数据。请注意：在 API 数据的基础上，我将填充我的问题数组，现在我使用虚拟数据只是为了确保流程正常运行。这就是我的 question.service.ts 的样子

public response : QuestionBase<any>[] =[];      
getQuestions(id) {
  this.http.get(this.url+'selectAllFieldDetails/'+id)
.pipe(map(
( response: Response) => {
    let data = response;
    console.log(data);


   let questions: QuestionBase<any>[] = [

      new DropdownQuestion({
        key: 'brave',
        label: 'Bravery Ratings',
        class:'form-control fis-form-control',
        formclass:'',
        options: [
          {key: 'solid',  value: 'Solid'},
          {key: 'great',  value: 'Great'},
          {key: 'good',   value: 'Good'},
          {key: 'unproven', value: 'Unproven'}
        ],
        required: true,
        order: 2
      }),

      new TextboxQuestion({
        key: 'process',
        label: 'Process name',
        value: 'IT ',
        class:'form-control fis-form-control',
        formclass:'',
        required: true,
        order: 1
      }),


    ];
    this.response =  questions.sort((a, b) => a.order - b.order);
   }
  ));
  console.log(this.response);
  return this.response;
}

但问题是在 API 响应之前的函数 return 和它 return 空数组。这就是我从 create-ticket.component.ts

调用的方式

ngOnInit() {
  this.questions = this.service.getQuestions(24);
  console.log(this.questions);
}

不知何故，我试图先获取 API 响应并将其存储在某个变量中，然后调用此函数 this.service.getQuestions(24)；但随后显示

错误

Error: Cannot find control with name: 'process'
at _throwError (forms.js:1775)
at setUpControl (forms.js:1683)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:4532)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:5030)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:4980)
at checkAndUpdateDirectiveInline (core.js:9239)
at checkAndUpdateNodeInline (core.js:10507)
at checkAndUpdateNode (core.js:10469)
at debugCheckAndUpdateNode (core.js:11102)
at debugCheckDirectivesFn (core.js:11062)

并且 Formgorup 数据仍然是空的。请帮我解决这个问题。提前致谢

Answer 1

基于 stackblitz 的过时信息

You should should always subscribe to an async call in order for it to be executed
ngOnInit() {
  this.questions = this.service.getQuestions(24).subscribe(result => {
                do something with result }, 
      err => { something went wrong });
}

这是一个基于您的堆栈闪电战： https://stackblitz.com/edit/angular-h8zakj?embed=1&file=src/app/question.service.ts

正如我所说，您的 setTimeout 存在问题。无法在您想要的位置访问数据。

Answer 2

经过长时间的研发，我终于做到了。基本上有两个问题

在 API 响应
在数据投入业务之前创建表单

因此，对于第一期，我在 angular

中使用了 async await 功能的概念

在 create-ticket.component.ts 中，我们像这样添加了 async 和 await。

async ngOnInit() {
    this.questions = await this.service.getQuestionss(24);
    if(this.questions.length>0){
       this.showForm=true;
    }
}

在服务中我们 return 一个承诺

async getQuestionss(id): Promise<any> {
     this.responses = await this.apiServce.getAllInputFields(id).toPromise();
}

它以承诺的形式响应，所以它一直等到 api 响应。 this.apiservice.getAllInputFields(id) 只是来自服务器的 http api 调用。

对于第二个问题，我只使用了一个小解决方案。我在表单中添加了 *ngIf，所以当 api 响应数据时，只有表单开始构建。

<app-dynamic-forms *ngIf="showForm" [questions]="questions"></app-dynamic-forms>

就是这样，问题已解决。

如何根据 angular 7 中的 API 响应制作动态表单？

how to make dynamic form from API response in angular 7?

dynamic-forms

form-control

angular

angular-reactive-forms

angular7