import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public myForm: FormGroup;
  serverResponse: Object[]
  isFormLoaded: boolean = false;
  constructor(private formBuilder: FormBuilder) {


  }
  ngOnInit(): void {
    setTimeout(() => {
      this.serverResponse = [
        {
          "id": "3792cedb-a1ac-1c43-b6bf-d439c6175072",
          "attributeName": "First name",
          "required": true,
          "requiredByDefault": true,
          "fieldLength": 30,
          "fieldType": "text",
          "fieldOrder": 0,
          "staticFieldIndex": 1,
          "exampleKey": null,
          "hintKey": null,
          "isRepeatable": null
        },
        {
          "id": "6e150ae3-1458-7944-8cec-5086762c3704",
          "attributeName": "Middle name",
          "required": false,
          "requiredByDefault": true,
          "fieldLength": 30,
          "fieldType": "text",
          "fieldOrder": 1,
          "staticFieldIndex": 2,
          "exampleKey": null,
          "hintKey": null,
          "isRepeatable": null
        },
        {
          "id": "6e150ae3-1458-7944-8cec-5086762c3704",
          "attributeName": "Last name",
          "required": true,
          "requiredByDefault": true,
          "fieldLength": 30,
          "fieldType": "text",
          "fieldOrder": 1,
          "staticFieldIndex": 2,
          "exampleKey": null,
          "hintKey": null,
          "isRepeatable": null
        },
        {
          "id": "6e150ae3-1458-7944-8cec-5086762c3704",
          "attributeName": "nickname",
          "required": true,
          "requiredByDefault": true,
          "fieldLength": 30,
          "fieldType": "text",
          "fieldOrder": 1,
          "staticFieldIndex": 2,
          "exampleKey": null,
          "hintKey": null,
          "isRepeatable": null
        }
      ];


    }, 1000)

    this.myForm = this.formBuilder.group({
    });
  }
  loaded() {
    if (this.serverResponse) {
      this.serverResponse.forEach((control) => {
        if (control['required']) {
          this.myForm.addControl(`${control['attributeName']}`, new FormControl('', Validators.required));
        } else {
          this.myForm.addControl(`${control['attributeName']}`, new FormControl(''));
        }
      })
    }
    this.isFormLoaded = true
  }
}