0

I followed a tutorial about dynamic forms (https://angular.io/guide/dynamic-form) and everything worked just fine untill I tried to retrieve the data from an HttpClient.

The problem: @Input() questions: QuestionBase<string>[] = [];in "dynamic-form.component.ts" returns null.

What did I change? In the question.service.ts, I replaced an of rxjs operator with this.<myHttpClientInstance>.get<any>(...) and then nothing worked anymore.

Other things equal I assumed that the problem resides in the change from of to this.<myHttpClientInstance>.get<any>(...). Therefore, I printed on the console the two different outputs of of and this.<myHttpClientInstance>.get<any>(...). They misteriously look different. Here they are:

enter image description here

Disclaimer: nothing has changed in "app.component.html" (in particular I'm referring to this line of code: [questions]="questions$ | async")

Any clue?

Edit:

Service code

   constructor(private http: HttpClient) {}

   getFormElementsFromHttpClient() {

return this.http.get<FormElementBase<any>[]>(environment.apiUrl + '/attribute-manager-be/view/fields')
.pipe(map( (response : any[]) => {

  let formElementsList : FormElementBase<any>[] = [];

  for (const formElement of response) {

    switch (formElement.type) {

      case "text":

        formElementsList.push(

          new FormElementText({
            fieldId: formElement.id,
            key: formElement.key,
            label: formElement.label,
            value: formElement.defaultValue,
            required: formElement.required,
            order: formElement.position
          }),

        )

        break;

      case "dropdown":

        formElementsList.push(

          new FormElementDropdown({
            fieldId: formElement.id,
            key: formElement.key,
            label: formElement.label,
            options: formElement.options,
            required: formElement.required,
            order: formElement.position
          })

        )

        break;

      case "checkbox":

        formElementsList.push(

          new FormElementCheckbox({
            fieldId: formElement.id,
            key: formElement.key,
            label: formElement.label,
            type: formElement.type,
            order: formElement.position,
            required: formElement.required
          })

        )

        break;

      case "multipleDropdown":

        formElementsList.push(

          new FormElementMultipleDropdown({
            fieldId: formElement.id,
            key: formElement.key,
            label: formElement.label,
            options: formElement.options,
            order: formElement.position,
            required: formElement.required
          }),

        )

        break;

      default:
        break;
    }

  }

    return formElementsList.sort((a, b) => a.order - b.order);    

  }
  ));

   }

   getFormElementsFromForOperator() {

let questions: FormElementBase<string>[] = [

  new FormElementMultipleDropdown({
    fieldId: 2,
    label: "dropdown",
    position: 4,
    required: true,
    key: "idtdropdown",
    options: [
        {
            id: 1,
            key: "ciambella",
            value: "ciambella"
        },
        {
            id: 2,
            key: "oreo",
            value: "oreo"
        }
    ]
  }),

  new FormElementText({
    fieldId: 1,
    type: "text",
    label: "text",
    position: 3,
    required: true,
    key: "idtext",
    options: null
  }),

  new FormElementCheckbox({
    fieldId: 1,
    type: "checkbox",
    label: "checkbox",
    position: 4,
    required: true,
    key: "idcheckbox",
    options: null
  }),

  new FormElementDropdown({
    fieldId: 4,
    type: "multipleDropdown",
    label: "multipledropdown",
    position: 1,
    required: true,
    key: "multipledropdown",
    options: [
        {
            id: 3,
            key: "abbracci",
            value: "abbracci"
        },
        {
            id: 4,
            key: "fagottini",
            value: "fagottini"
        }
    ]
  })

];

return of(questions.sort((a, b) => a.order - b.order));


   }

Component (ts) code

     @Component({
       selector: 'app-home',
       templateUrl: './home.component.html',
       styleUrls: ['./home.component.css'],
       providers:  [FormService]
     })
     export class HomeComponent {

     questions$: Observable<FormElementBase<any>[]>;

       constructor(formService: FormService) {

         this.questions$ = formService.getFormElementsFromForOperator();

         console.log("(for operator) works", this.formelements$);
         console.log("(HttpClient) doesn't work", formService.getFormElementsFromHttpClient());

       }
     }

0 Answers0