Заполните входные значения из БД, используя массивы форм - Reactive Forms Angular 8

Question

Я пытаюсь получить oop переменную метаданных json, полученную из БД (allTags), и создать элементы формы при инициализации компонента метаданных. Теперь при инициализации компонента метаданных мне нужно предварительно заполнить / заполнить эти поля ввода другой переменной json (selectedFile). Пожалуйста, помогите мне сделать это. Я новичок в этом.

HTML:

  <form [formGroup]="form">
    <div FormArrayName="customTags" class="form-group" *ngFor="let tag of allTags; let i = index">
        <label for="{{ tag.tagName }}"> {{ tag.tagName }} </label>
        <input type="{{ tag.tagType }}" formControlName="{{i}}" class="form-control" id="{{ tag.tagName }}">
    </div>
</form>

Тип сценария:

import { Component, OnInit } from "@angular/core";
import { Tag } from "../models/metaData.model";
import { File } from "../models/dbFile.model";
import { AuthService } from "../services/auth.service";
import { FormBuilder, FormGroup, Validators, FormArray } from "@angular/forms";
import { TagItem } from "../models/singleTag.model";

@Component({
  selector: "app-metadatas",
  templateUrl: "./metadatas.component.html",
  styleUrls: ["./metadatas.component.scss"]
})
export class MetadatasComponent implements OnInit {
  allTags: Tag[];
  selectedFile: File;
  form: FormGroup;
  tagItem = new TagItem();

  constructor(
    private metaDataService: MetaDataService,
    private authService: AuthService,
    private formBuilder: FormBuilder,
  ) {}

  ngOnInit() {
    this.metaDataService.getTags().subscribe(res => {
      this.allTags = res;
    });

    this.form = this.formBuilder.group({
      tagTitle: ["", Validators.required],
      tagAuthor: [{ value: "", disabled: true }, Validators.required],
      customTags: this.formBuilder.array([])
    });

    get customTagsArray() {
        return this.form.get("customTags") as FormArray;
      }

    this.filesService.currentFile.subscribe(file => {
      this.selectedFile = file;
      this.form.patchValue({

      });
    });
  }

  get f() {
    return this.form.controls;
  }

}

переменная allTags:

[
    {
        "id": 1,
        "customerId": "3d0f0a81-4d9e-4772-9ca3-e1f307f12ecf",
        "tagName": "Location",
        "tagType": "Text",
        "createdAt": "2020-02-26T17:26:51.745Z",
        "updatedAt": "2020-02-26T17:26:51.745Z"
    },
    {
        "id": 2,
        "customerId": "3d0f0a81-4d9e-4772-9ca3-e1f307f12ecf",
        "tagName": "Status",
        "tagType": "Text",
        "createdAt": "2020-02-26T17:26:55.308Z",
        "updatedAt": "2020-02-26T17:26:55.308Z"
    }
]

selectedFile Переменная:

[
    {
        "id": 2,
        "userID": "3d0f0a81-4d9e-4772-9ca3-e1f307f12ecf",
        "parentID": "1",
        "itemName": "test1",
        "itemID": null,
        "itemDepth": 1,
        "itemPath": "0|1",
        "isFolder": true,
        "hasChild": false,
        "createdAt": "2020-02-27T03:09:28.920Z",
        "updatedAt": "2020-02-27T03:09:28.920Z",
        "tblTagDetails": [{
           "id": "1",
           "tagId": "1",
           "tagValue": "Bangalore",
           "fileId": "2"
           "tblTags": [{
                  "id": "1",
                  "tagName": "Location",
                  "tagType": "text"
             }]
      }, {
             "id": "2",
           "tagId": "2",
           "tagValue": "Completed",
           "fileId": "2"
           "tblTags": [{
                  "id": "1",
                  "tagName": "Status",
                  "tagType": "text"

         }
    ]
]