Custom Name for Formbuilder Reactive Form - Angular 7

Question

Nowaday I´m creating this formBuilder:

 return this.fb.group(
      {
        myaccount: [ '', [Validators.required]]
        }
    );

When I´m getting the error message for element I´m doing:

Object.keys(formToValidate.controls).forEach(key => {

      const controlErrors: ValidationErrors = formToValidate.get(key).errors;
      if (controlErrors != null) {
        Object.keys(controlErrors).forEach(keyError => {
          if (keyError === 'required') {

            console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
          }

        });
      }
    });

Display: Key control: myaccount, keyError: required, err value: true

The problem is I dont want to display 'myaccount' but 'My Account'. I tried in some way to do this:

return this.fb.group(
      {
        myaccount: [ 'My Account','', [Validators.required]]
        }
    );

but this is not possible. How can I do this?

EDIT:

I want to display label (Specific one) and not the value on the form. I want to customize a specific name for my console.log?

Answer 1

You are basically printing the form control name and you want to display the value instead of FormControl Name .

In your example code , myaccount is FormControl Name and My Account is FormControl Value .

To Display the FormControl value all you need to do is :

Object.keys(formToValidate.controls).forEach(key => {

      const controlErrors: ValidationErrors = formToValidate.get(key).errors;
      if (controlErrors != null) {
        Object.keys(controlErrors).forEach(keyError => {
          if (keyError === 'required') {

            console.log('Key control: ' + formToValidate.get(key).value+ ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
          }

        });
      }
    });

Answer 2

That works for me. The error is in you are printing formControl and not the value

Object.keys(formToValidate.controls).forEach(key => {

  const controlErrors: ValidationErrors = formToValidate.get(key).errors;
  if (controlErrors != null) {
    Object.keys(controlErrors).forEach(keyError => {
      if (keyError === 'required') {

        console.log('Key control: ' + key.value + ', keyError: ' + keyError + ', err value: 
  ', controlErrors[keyError]);
      }

    });
  }
});  

Answer 3

Consider formGroup As a normal javascript object, its key is its control name,

const thisIsInvalid = {  My Account: 'Account Name'}

const thisIsValid = {'My Account': 'Account Name'}

return this.fb.group(
      {
        'My Account': [ '', [Validators.required]]
        }
    );

So changing the key name from myAccount to My Account will give an error but changing key name from myAccount to 'My Account' won't. Hope this help.