How to get name of input field from Angular2 FormControl object?

Question

I have an Angular 2 application that uses the ReactiveForms module to manage a form that uses a custom validator. The validator receives a FormControl object. I have a few input fields that could use the same custom validator if only I knew the name of the field when the FormControl was passed to the validator.

I can't find any method or public property on FormControl that exposes the input field's name. It's simple enough to see its value, of course. The following shows how I would like to use it:

public asyncValidator(control: FormControl): {[key: string]: any} {
  var theFieldName = control.someMethodOfGettingTheName(); // this is the missing piece

  return new Promise(resolve => {
      this.myService.getValidation(theFieldName, control.value)
        .subscribe(
          data => {
            console.log('Validation success:', data);
            resolve(null);
          },
          err => {
            console.log('Validation failure:', err);
            resolve(err._body);
          });
    });
  }

Chris · Accepted Answer · 2017-09-17 01:36:36Z

48

To expand on Radim Köhler answer. here is a shorter way of writing that function.

getControlName(c: AbstractControl): string | null {
    const formGroup = c.parent.controls;
    return Object.keys(formGroup).find(name => c === formGroup[name]) || null;
}

answered Sep 17, 2017 at 1:36

Chris

6115 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

FireDragon Over a year ago

most succinct answer, but it's still clear what's going on. works for me in Angular 4. thanks

ShadSterling Over a year ago

Wouldn't it be better to construct a Map of AbstractControls to names and look up in that, rather than generating the key list and then searching the key list for each lookup?

lonix Over a year ago

Doesn't work:

"Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ [key: string]: AbstractControl; } | AbstractControl[]'."

321X Over a year ago

@Ionix: Use this: Object.keys(c.parent.controls).find(name => c === c.parent.get(name))

Shailesh Bhat Over a year ago

const formGroup = c["_parent"].controls; return Object.keys(formGroup).find(name => c === formGroup[name]) || null; this code worked for me @4.1.5 version of typescript. Works for all versions may be..But, I'm not sure

|

Radim Köhler · Accepted Answer · 2016-11-03 11:53:06Z

29

We can use .parent property, well today ["_parent"] (see more below):

export const getControlName = (control: ng.forms.AbstractControl) =>
{
    var controlName = null;
    var parent = control["_parent"];

    // only such parent, which is FormGroup, has a dictionary 
    // with control-names as a key and a form-control as a value
    if (parent instanceof ng.forms.FormGroup)
    {
        // now we will iterate those keys (i.e. names of controls)
        Object.keys(parent.controls).forEach((name) =>
        {
            // and compare the passed control and 
            // a child control of a parent - with provided name (we iterate them all)
            if (control === parent.controls[name])
            {
                // both are same: control passed to Validator
                //  and this child - are the same references
                controlName = name;
            }
        });
    }
    // we either found a name or simply return null
    return controlName;
}

and now we are ready to adjust our validator definition

public asyncValidator(control: FormControl): {[key: string]: any} {
  //var theFieldName = control.someMethodOfGettingTheName(); // this is the missing piece
  var theFieldName = getControlName(control); 
  ...

`.parent` later, `["_parent"]` now

At the moment (today, now), current release is :

2.1.2 (2016-10-27)

But following this issue: feat(forms): make 'parent' a public property of 'AbstractControl'

And as already stated here

2.2.0-beta.0 (2016-10-20)

Features

forms: make 'parent' a public property of 'AbstractControl' (#11855) (445e592)

...

we could later change the ["_parent"] into .parent

edited Nov 3, 2016 at 11:53

answered Nov 2, 2016 at 14:44

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

7 Comments

Michael Oryl Over a year ago

This certainly lets one gain access to the form, but how do you then identify which of the (many) fields in the form is represented by your original FormControl that was passed into the validator?

Radim Köhler Over a year ago

I am not fully sure about your concern. The point is: The name of a FormControl is given only by its parent FormGroup. Because only such parent has a MAP of controls and the keys, represent the name. And because every control has the information, who is its .parent, we can get that information anywhere.. even inside of validator .. just by calling the above (or adjusted/optimized) function getControlName(controlPassedToValidtor). Other words, even single control, passed to validator function is enough - to get its name. Only condition is: it must be child of FormGroup

Michael Oryl Over a year ago

The concern is access to the FormGroup gives me access to every FormControl it contains along with the name of every field they represent. But out of that list of FormControls I now have access to, how do I know which one is the FormControl that was passed into the validator. I need the name of a specific field. Unless there's something I'm missing, what you are providing is a list of all fields....

Radim Köhler Over a year ago

Hmmm how to explain it. We have a control inside of the validator. We have a reference to it. We also have a dictionary a set of { Name1: control1, Name2: control2, ...}. Each control (1, 2, ...) is an instance of some FormControl (or other FormGroup or FormArray). So, we can compare the control passed to the validator with each of them. If the reference is the same control === parent.controls[name] we got a match. Such parent child is the same as the control passed to validator. Helping? or ... ? I mean, we have to have a control, which we do.. it was passed...

Radim Köhler Over a year ago

I extended my answer, with more details in comments, and mostly - showed how inside of the validator we can call that function, and receive a name of that control... hope now it is clear

|

Rich · Accepted Answer · 2020-06-29 01:54:46Z

11

You can set control name in validators:

this.form = this.fb.group({
     controlName: ['', 
         [
            Validators.required, 
            (c) => this.validate(c, 'controlName')
         ]
      ]
});

And then:

validate(c: FormControl, name) {
    return name === 'controlName' ? {invalid: true} : null;
}

edited Jun 29, 2020 at 1:54

Rich

4,3786 gold badges45 silver badges78 bronze badges

answered Nov 19, 2018 at 13:32

Taras Sokolovskyi

1212 silver badges3 bronze badges

1 Comment

Mr AH Over a year ago

you just saved me from a lot of pain... I had a async validator in reactiveforms which used the control name to go off to a service and get some validation information back. but it was always called initially on the new FormControl bit, so the parent was undefined, and if you return of(null) to get past the undefined parent, it will always set the control to VAILD even though there are errors on the next call!

Steve Brush · Accepted Answer · 2017-07-15 19:48:04Z

8

As of Angular 4.2.x, you can access a FormControl's parent FormGroup (and its controls) using the public parent property:

private formControl: FormControl;

//...

Object.keys(this.formControl.parent.controls).forEach((key: string) => {
  // ...
});

edited Jul 15, 2017 at 19:48

answered Jul 15, 2017 at 18:59

Steve Brush

3,2411 gold badge28 silver badges17 bronze badges

1 Comment

Nowdeen Over a year ago

Here, in may 2020, I had to change this.formControl.parent.controls by this.formControl.value in the above suggested code.

Bazinga · Accepted Answer · 2016-11-01 15:15:55Z

6

You have two options:

With the help of the Attribute decorator:

constructor(@Attribute('formControlName') public formControlName) {}

With the help of the Input decorator:

@Input() formControlName;

To use this your validation needs to be a directive of course.

answered Nov 1, 2016 at 15:15

Bazinga

11.3k7 gold badges42 silver badges66 bronze badges

Comments

Michael Ziluck · Accepted Answer · 2022-02-15 17:07:45Z

1

A one-line variation of the accepted answer (also resolves the bug I mention in the comment).

getName(control: FormControl): string | null {
  return Object.entries(control.parent?.controls ?? []).find(([_, value]) => value === control)?.[0] ?? null;
}

answered Feb 15, 2022 at 17:07

Michael Ziluck

6857 silver badges22 bronze badges

1 Comment

sreejagaths Over a year ago

Brilliant! Saved a day.

dabicho · Accepted Answer · 2017-03-01 23:15:25Z

0

Not exactly what you want but you could dynamically create the validator like in some examples.

like

typeBasedValidator(controlName: string): ValidatorFn {
  return(control: AbstractControl): {[key: string]: any} => {
     // Your code using controlName to validate
     if(controlName == "something") { 
       doSomething(); 
     } else { 
       doSomethingElse(); 
     }
  }
}

Then use the validator when creating the form, passing the control name like

answered Mar 1, 2017 at 23:15

dabicho

3935 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to get name of input field from Angular2 FormControl object?

7 Answers 7

7 Comments

`.parent` later, `["_parent"]` now

7 Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

.parent later, ["_parent"] now

7 Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`.parent` later, `["_parent"]` now