Angular : Is there a way to identify html form controls uniquely inside ts component?

Question

Typescript Method

 addOneDocument(supplierForm){
    const controls = supplierForm.controls;
    for(const name in controls){

      if (controls[name].invalid) {
        controls[name].touched=true;
    }
    }
  }

I want to change this method to check a particular form control for errors. I actually want something like following

 if ((controls[name].invalid)&&(controls[name].name=="document"))

but name property doesn't exist on type FormControl. How to identify a particular html form control uniquely in typescript?

Answer 1

You could think of form controls as a tree-like structure. For example, the parent would be a FormGroup and its descendants could be some FormControls / FormGroups / FormArrays and so on.

I'm not aware of any way to identify a form control like this, but the best solution that comes to mind it to use the get() method, to which you can provide a path to your form control.

Excerpt from A thorough exploration of Angular Forms :

const fg = new FormGroup({
  name: new FormControl(''),
  address: new FormGroup({
    city: new FormControl(''),
    street: new FormControl(''),
  }),
});

You could use the get method like this:

fg.get('address.city')

// Or

fg.get(['address', 'street'])

So, I'd say that a way to identify a form control would be to use its path .