Cannot append value in FormControl in Angular 7

Viewed 1471

Data 1

     []
     0: {type: "text", name: "first_name", label: "First Name", value: "", required: true}
     1: {type: "text", name: "last_name", label: "Last Name", value: "", required: true}
       length: 2
       __proto__: Array(0)

Data 2

       (2) [{…}, {…}]
       0: {type: "text", name: "first_name", label: "First Name", value: "", required: true}
       1: {type: "text", name: "last_name", label: "Last Name", value: "", required: true}
    length: 2
  __proto__: Array(0)

API Json

        FIELDS_FILTERS: [
        {
        type: "text",
        name: "first_name",
        label: "First Name",
        value: "",
        required: true,
        },
        {
        type: "text",
        name: "last_name",
        label: "Last Name",
        value: "",
        required: true,
        },
        ],

Angular code

export class DynamicFormsTestComponent implements OnInit {
              publicDeals: Person[] = [];
              public form: FormGroup;
              public fields1: any[] = [
                {
                  type: 'text',
                  name: 'first_name',
                  label: 'First Name',
                  value: '',
                  required: true,
                },
                {
                  type: 'text',
                  name: 'last_name',
                  label: 'Last Name',
                  value: '',
                  required: true,
                },
              ];
              p_col: any;


              constructor(private httpClient: HttpClient, private http: Http, private formBuilder: FormBuilder,
                private personservice: PersonService) {}
              ngOnInit() {

                this.getOtherDetails();
                this.p_col = this.publicDeals;
                this.form = new FormGroup({
                  fields: new FormControl(this.publicDeals)
                });
              }

              getFields() {

              return this.p_col;  ----this don't works
             -- return this.fields1;  --this works
              }

              getOtherDetails() {
                return this.personservice.getDatatableDetails()
                  .subscribe(persons => {
                    persons.FIELDS_FILTERS.forEach(element => {
                      this.publicDeals.push(element);
                    });
                  });
              }

this.p_col outputs data 2, which is fine

Component html

    {{publicDeals|json}}
    <app-dynamic-form-builder [fields]="getFields()"></app-dynamic-form-builder>

when I dump json.

Output

 [{
"type": "text",
"name": "first_name",
"label": "First Name",
"value": "",
"required": false
  }, {
"type": "text",
"name": "last_name",
"label": "Last Name",
"value": "",
"required": false
 }]

Now I have send correct format data as data2 in dynamic component but when tried to print this.fields data format get changed into data 1.

If I output in dynamic component is data 2 then my code will work.

Dynamic component ts

        export class DynamicFormBuilderComponent implements OnInit {
          // @Output() onSubmit = new EventEmitter();
          @Input() fields: any[] = [];
          form: FormGroup;
          persons: Person[];
          submitted = false;
          constructor(private router: Router, private personservice: PersonService) { }

          ngOnInit() {


            console.log(this.fields); 
           console.log(typeof(this.fields)); --always return object

            console.log(this.fields.length);  
           --length 0  this.publicdeals.
           --length 2  this.fields1.

       const fieldsCtrls = {};
        for (const f of this.fields) {
        console.log('for lopp true=============');


        }
        this.form = new FormGroup(fieldsCtrls);
            }

Data 1

console.log(this.publicDeals)

Data 2

  console.log(this.fields1)

Problem

  • on accessing json this.publicDeals in dynamic component its field.length to 0.

  • but on accessing this.field1 it return length 2.

  • I can access data in dynamic component with hardcoded array but problem occurs while rendering data from api service.

2 Answers

You need put the lines:

        this.p_col = this.publicDeals;
        this.form = new FormGroup({
          fields: new FormControl(this.publicDeals)
        });

UNDER subscribe function in getOtherDetails()

       getOtherDetails() {
            return this.personservice.getDatatableDetails()
              .subscribe(persons => {
                persons.FIELDS_FILTERS.forEach(element => {
                  this.publicDeals.push(element);
                });
                .....HERE....
              });

take account that this.publicDeals has no value until the call is completed

Solution that worked

 <app-dynamic-form-builder  *ngIf="publicDeals.length > 0" [fields]="publicDeals"></app-dynamic-form-builder>
Related