Создание динамических форм из ответа API в angular7

Question

Я создал компонент для создания динамических форм, используя угловые реактивные формы. Когда я пытаюсь использовать компонент для создания полей формы в другом компоненте в зависимости от ответа от моего API. Созданная форма отключается для меня, я не могу редактировать форму в своем браузере. Я использовал this в качестве ссылки для создания формы. Но здесь они жестко закодировали поля, в моем случае я использую вызов API, чтобы получить поля как JSON.

Мой код TS:

getFields(tab) {
    this.fields = [];
    const itemIndex = this.dynamicFields.findIndex(item => 
    item.tab_name === tab);
    this.dynamicFields[itemIndex].extra_fields[tab].forEach(value => {
    this.fields.push(
        {
            type: value.type,
            name: value.name,
            label: value.name,
            value: '',
            required: value.required,
         }
       )
     });

    this.form = new FormGroup({
      fields: new FormControl(JSON.stringify(this.fields))
    });
    return this.fields;

  }


getDynamicFields() {

    this.apiService.get('dynamic-fields/').subscribe(
      data => {
        this.dynamicFields = data.results;

      },
      error => {
        console.log(error);
      });
  }

Мой HTML:

<ng-template ngbTabContent>
    <dynamic-form-builder [fields]="getFields('health')"></dynamic-form-builder>
</ng-template>

Ответ API:

{
"totalElements": 3,
"totalPages": 1,
"results": [
    {
        "id": 1,
        "created": "2019-04-09T06:52:50.776000Z",
        "updated": "2019-04-09T08:54:44.664000Z",
        "tab_name": "passport",
        "extra_fields": {
            "passport": [
                {
                    "name": "name",
                    "type": "text",
                    "label": "Name on Passport",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "passportNo",
                    "type": "text",
                    "label": "Passport No",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "dateOfIssue",
                    "type": "date",
                    "label": "Date of Issue",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "dateOfExpiry",
                    "type": "date",
                    "label": "Date of Expiry",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "placeOfIsse",
                    "type": "text",
                    "label": "Place of issue",
                    "value": "",
                    "required": "true"
                }
            ]
        },
        "general_fields": null
    },
    {
        "id": 2,
        "created": "2019-04-09T07:44:12.113000Z",
        "updated": "2019-04-09T07:44:12.113000Z",
        "tab_name": "bank",
        "extra_fields": {
            "bank": [
                {
                    "name": "name",
                    "type": "text",
                    "label": "Bank Name",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "accountName",
                    "type": "text",
                    "label": " Name of the account Holder",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "accountNo",
                    "type": "text",
                    "label": "Account No",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "accountType",
                    "type": "text",
                    "label": "Account Type",
                    "value": "",
                    "required": "true"
                },
                {
                    "name": "code",
                    "type": "text",
                    "label": "IFSC/SWIFT Code",
                    "value": "",
                    "required": "true"
                }
            ]
        },
        "general_fields": null
    },
    {
        "id": 3,
        "created": "2019-04-09T07:45:25.721000Z",
        "updated": "2019-04-22T07:21:53.389265Z",
        "tab_name": "health",
        "extra_fields": {
            "health": [
                {
                    "name": "Blood Group123",
                    "type": "text",
                    "required": "true"
                },
                {
                    "name": "Height",
                    "type": "text",
                    "required": "true"
                },
                {
                    "name": "Weight",
                    "type": "text",
                    "required": true
                },
                {
                    "name": "dsafsa",
                    "type": "text",
                    "required": ""
                }
            ]
        },
        "general_fields": {
            "health": [
                {
                    "group": [
                        {
                            "name": "label",
                            "type": "text",
                            "value": "Blood Group"
                        },
                        {
                            "name": "type",
                            "type": "text",
                            "value": "text"
                        },
                        {
                            "name": "required",
                            "type": "checkbox",
                            "value": "true"
                        }
                    ]
                }
            ]
        }
    }
]
}

Answer 1

Akhil.Код, который вы поместили, - это, как я уже сказал, компонент с входом и выходом.В этот стек я меняю «философию», чтобы создать компонент, который управляет «FormsControl»

Разница в том, что теперь вы создаете FormGroup в appComponent, а не в динамической форме.строитель.Это причина того, что «submit» теперь принадлежит app-компоненту.Другое отличие состоит в том, что «атомы» получают как @Input FormControl - за исключением списка флажков - и не имеют ссылки на форму.Это не обязательно.

Используя этот подход, вы можете сначала создать целую группу FormGroup.Помните, что FormGroup существует и не зависит от того, есть у нас вход или нет.Затем вы можете создать другую «вкладку» или «что угодно» в соответствии с вашим файлом.

В стеке я разделил исходный список на две группы и сделал простой <div *ngFor>

Я надеюсь, что это поможет вам