Как сделать динамическую форму из ответа API в угловых 7? - PullRequest
Новая
       38

Как сделать динамическую форму из ответа API в угловых 7?

2 голосов
/ 18 апреля 2019

Я работаю над динамической формой в 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 и возвращает пустой массив.Так я звоню из 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 остаются пустыми.Пожалуйста, помогите мне в этой проблеме.Заранее спасибо

Ответы [ 2 ]

1 голос
/ 22 апреля 2019

Итак, наконец, после долгих исследований я сделал это. в основном было две проблемы

  1. функция в сервисе отвечает до ответа API
  2. Форма создается до того, как данные поступают в бизнес

Итак, для первого выпуска я использовал концепцию функции async await в угловых

В create-ticket.component.ts мы добавили async и ожидаем вот так. 

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

и в сервис мы возвращаем обещание 

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

он отвечает как обещание, так что дождитесь ответа API. this.apiservice.getAllInputFields(id) - это просто вызов HTTP API с сервера.

Для 2-й задачи я использовал только небольшое решение. я добавил * ngIf в форму, поэтому, когда API отвечает данными, только форма начинает строить. 

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

Вот и все, и проблема решена.

0 голосов
/ 18 апреля 2019

устаревшая информация на основе стекаблиц

Вы должны всегда подписываться на асинхронный вызов, чтобы он исполниться 

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. данные не были доступны там, где вы хотели.

...