Need to show delete button for previous field sections also

Question

Stackblitz Link

Here if I click on add button delete button is showing for the last fields. Need to show delete button for all the respective fields sections.

this is the json structure

    {
  "headline": [
    {
      "headlineText": "example en headline",
      "language": "en"
    },
    {
      "headlineText": "example de headline",
      "language": "de"
    }
  ],
  "bodyText": [
    {
      "bodyText": "example en bodytext",
      "language": "en"
    },
    {
      "bodyText": "example de bodytext",
      "language": "de"
    }
  ],
  "location": {
    "name": "mkontheway",
    "openingHours": [
      {
        "day": "Mon-frd",
        "timing": "10.00PM-9AM"
      }
    ],
  }
}

Modified the screenshot for actual requirement. Need delete button on the right side for each fields which gets added

Please help me how to achieve this in angular.

Answer 1

Look the console:

It looks like you're using ngModel on the same form field as formControlName.
Support for using the ngModel input property and ngModelChange event with
reactive form directives has been deprecated in Angular v6 and will be removed
in a future version of Angular.

For more information on this, see our API docs here:
https://angular.io/api/forms/FormControlName#use-with-ngmodel

This is a warning, and then you have an error everytime you click the add button:

ERROR
Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '{
"headline": [
{
"headlineText": "example headline",
"language": "en"
},
{
"headlineText": null,
"language": null
}
],
"bodyText": [
{
"bodyText": "example bodytext",
"language": "en"
}
],
"location": {
"name": "mkontheway",
"openingHours": [
{
"day": "Mon-frd",
"timing": "10.00PM-9AM"
}
],
"address": {
"postCode": null,
"country": null
}
}
}'. Current value: '{
"headline": [
{
"headlineText": "example headline",
"language": "en"
},
{
"headlineText": null,
"language": "en"
}
],
"bodyText": [
{
"bodyText": "example bodytext",
"language": "en"
}
],
"location": {
"name": "mkontheway",
"openingHours": [
{
"day": "Mon-frd",
"timing": "10.00PM-9AM"
}
],
"address": {
"postCode": null,
"country": null
}
}
}'.. Find more at https://angular.io/errors/NG0100