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:
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());
}
}