FormGroup, get names of FormControl instead of numbers in Angular

Question

I have in my code:

  private buildFormGroup() {
    const internalFormGroup = this.formBuilder.group({
      document: ['', [Validators.required, Validators.min(this.minValueDocument)]],
      company: ['', [Validators.required]],
      typeClient: ['', [Validators.required]],
      textRequest: ['', [Validators.required, Validators.minLength(this.minNumberCharPerRequest)]],
      files: [''],
      myKey: ['myValue'],
    });

    return internalFormGroup;
  }

In my constructor I have this lines following this answer:

this.formGroup = this.buildFormGroup();

for(let item in Object.keys(this.formGroup.controls)) {
  console.log(item)
}
for(let item in this.formGroup.controls) {
  console.log(this.formGroup.controls[item])
}

But, I get only numbers and the value appears empty!!!

I forget something? How I can get the name of the control (not the its Value)?

For my previous example: I would like to get: document, company, typeClient, textRequest,files, myKey

would adding `.value` here `console.log(this.formGroup.controls[item].value)` resolve your problem? — The Fabio, Jan 29 '22 at 15:15
also, `this.formGroup.value` should give you all the current values — The Fabio, Jan 29 '22 at 15:17

score 0 · Accepted Answer · answered Jan 29 '22 at 15:27

The for...in statement iterates over all enumerable properties of an object that are keyed by strings. MDN docs

Since you are already extracting the keys from controls into an array, the for...in is looping through the array keys.

You have to either use for...in directly on formGroup.controls.

for(let item in this.formGroup.controls) {
  console.log(item)
}

Or use for...of instead

for(let item of Object.keys(this.formGroup.controls)) {
  console.log(item)
}

cheers

FormGroup, get names of FormControl instead of numbers in Angular

1 Answers1