Angular Reactive Forms Input Error (input field not showing)

Question

I've created a dynamic form (Angular 10) that dynamically gets FormControlNames via a call to the backend (Django/DjangoRestFramework) .

The FormControlNames are the names of the articles I want the users to see. Users will have to write in each input field binded to the correct FormControlName the quantity of each article showed and then submit the whole thing.

The problem: altough I can see the FormControlNames get correctly created (showed by):

  {{myForm?.value|json}}

Users can't put any value for the newly created FormControlNames because the input fields don't appear. What can I do to get the input fields box to show? I don't get any error on the console. Input boxes just don't appear.

Screenshot

Backend File/Response:

[
    {
        "id": 16,
        "nomeart": "Gambero Abbattuto",
        "completed": false,
        "desart": "code abbattute alla fonte",
        "codiceart": "zgamberiiiiii",
        "peso": 1,
        "taglia": 0,
        "um": "kg"
    },
    {
        "id": 15,
        "nomeart": "Branzino Fresco",
        "completed": false,
        "desart": "è un branzino",
        "codiceart": "ilbraaaa",
        "peso": 1,
        "taglia": 0,
        "um": "kg"
    },
    {...}

]

File: component.ts

import { Component, OnInit } from '@angular/core';
import { ServerService } from 'src/app/server.service';
import { DataService } from "./data.service";
import { AuthService } from 'src/app/auth.service';
import { FormBuilder, FormGroup,
  Validators, FormArray,
  ReactiveFormsModule, FormControl } from '@angular/forms';
import { delay } from 'rxjs/operators';

  interface articoli {
    id: 'number',
    nomeart: 'string',
    completed: 'boolean',
    desart: 'string',
    codiceart: 'string',
    peso: 'number',
    taglia: 'number',
    um: 'string',
  }

  interface Pezzi {
    value: string;
  }


@Component({
  selector: 'app-ordine',
  templateUrl: './ordine.component.html',
  styleUrls: ['./ordine.component.scss']
})
export class OrdineComponent implements OnInit {

  myForm: FormGroup;

  articoli: any;

  articolo= {
    id: 'number',
    nomeart: 'string',
    completed: 'boolean',
    desart: 'string',
    codiceart: 'string',
    peso: 'number',
    taglia: 'number',
    um: 'string',
  }

  constructor(
    private server: ServerService,
    private authService: AuthService,
    public dialog: MatDialog,
    private fb: FormBuilder,
    private dataService: DataService
  ) {}

  ngOnInit() {

    this.server.request('GET', '/api/v1/articolo-list/')
    .subscribe((data: any) => {
      if (data) {
        this.articoli = data;
      }
    });

    this.myForm = this.fb.group({
      title: ["", []],
      articoli: this.fb.group({})
    });
    this.getThings();

  }

  getThings() { 
    this.dataService.getThings().subscribe(data => {
      this.articoli = data;
      this.dataService.arty.forEach(x => {
        (this.myForm.get("articoli") as FormGroup).addControl(
          x.nomeart,
          this.fb.control("0")
        );
      });
    });

  }



  nrpezzi: Pezzi[] = [
    { value: '0'},
    { value: '1'},
    { value: '2'},
    { value: '3'},
    { value: '4'},
    { value: '5'},    
    { value: '6'},
    { value: '7'},
    { value: '8'},
    { value: '9'},
    { value: '10'},
    { value: '11'},
    { value: '12'},
    { value: '13'},
    { value: '14'},
    { value: '15'},
    { value: '16'},
    { value: '17'},
    { value: '18'},
    { value: '19'},
    { value: '20'},
    { value: '21'},
    { value: '22'},
    { value: '23'},
    { value: '24'},
    { value: '25'},
    { value: '26'},
    { value: '27'},
    { value: '28'},
    { value: '29'},
    { value: '30'},
    { value: '31'},
    { value: '32'},
    { value: '33'},
    { value: '34'},
    { value: '35'},
    { value: '36'},
    { value: '37'},
    { value: '38'},
    { value: '39'},
    { value: '40'},
    { value: '41'},
    { value: '42'},
    
  ];

}

File: dataservice.ts

import { Injectable, OnInit } from "@angular/core";
import { of } from "rxjs";
import { delay } from "rxjs/operators";
import { ServerService } from 'src/app/server.service';
import { AuthService } from 'src/app/auth.service';
import { OrdineComponent } from './ordine.component';

interface articoli {
  id: 'number',
  nomeart: 'string',
  completed: 'boolean',
  desart: 'string',
  codiceart: 'string',
  peso: 'number',
  taglia: 'number',
  um: 'string',
}

@Injectable({
  providedIn: "root"
})

export class DataService {

  constructor(
    private server: ServerService,
    private authService: AuthService,
  ) {}

  
  arty:articoli[] =[];


  articolo= {
    id: 'number',
    nomeart: 'string',
    completed: 'boolean',
    desart: 'string',
    codiceart: 'string',
    peso: 'number',
    taglia: 'number',
    um: 'string',
  }

  
  getThings() {

    this.server.request('GET', '/api/v1/articolo-list/')
    .subscribe((data: any) => {
      if (data) {
        this.arty = data;
        console.log(data);
      }
    });

    return of(
   [this.articolo.nomeart]
  ).pipe(delay(200));
  }
}

File: component.html

<form [formGroup]="myForm">
    ...
    <div formGroupName="articoli">
        <mat-card *ngFor="let articolo of arty">
            <input [formControlName]=
            "articolo.nomeart"> 
        </mat-card>
    </div>
  </form>
  {{myForm?.value|json}}
  <hr/>

Does anyone know what i'm doing wrong?

Answer 1

<mat-card *ngFor="let articolo of arty"> in the above line just checking have you assigned the value of arty in respective component ts layer which displays the html, please check whether arty list value is comming are or not as you checked like for the myform