In Typescript, is there a way to retrieve the name of an object when working with object types?

Question

In Typescript, is there a way to retrieve the name of an object when working with object types?

I am working on creating a for() loop to check the first field in my template with the status INVALID and I need to retrieve the name of this object.

This is what I have tried so far:

for(var mandatoryField in form.controls){

  if(form.controls[mandatoryField].status == "INVALID"){
    var displayedMandatoryField = form.controls[mandatoryField];
    console.log(displayedMandatoryField)
    return ;
  }

}

It seems like my logic is correct, but I am not able to get the name of my object in this line:

var displayedMandatoryField = form.controls[mandatoryField];

I want to traverse the DOM tree to find the object with the status INVALID, but I only need its name. For example: height, length, etc...

https://i.sstatic.net/abz2V.png

Any suggestions on how can I achieve this?

angular typescript

Answer 1

Answer №1

If you want to iterate over iterable objects, consider using the for...of statement instead of for...in loop in your code snippet:

for(var campoObrigatorio of formulario.controls){

  if(campoObrigatorio.status == "INVALID"){
    console.log(campoObrigatorio);
    return 
  }

}

The for...of statement is used to create a loop that iterates over iterable objects such as built-in String, Array, Array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It triggers a custom iteration hook with statements executed for each distinct property value of the object.

Find out more about for..of Here.

Answer 2

If you want to iterate over iterable objects, consider using the for...of statement instead of for...in loop in your code snippet:

for(var campoObrigatorio of formulario.controls){

  if(campoObrigatorio.status == "INVALID"){
    console.log(campoObrigatorio);
    return 
  }

}

The for...of statement is used to create a loop that iterates over iterable objects such as built-in String, Array, Array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It triggers a custom iteration hook with statements executed for each distinct property value of the object.

Find out more about for..of Here.

Answer 3

Answer №2

When looping through your form controls, you already have access to the property name by default which is represented by var campoObrigatorio. Therefore, the following code snippet should meet your requirements:

for(var campoObrigatorio in formulario.controls){
  if (formulario.get(campoObrigatorio).status === "INVALID") { // Using get for clarity
    console.log(campoObrigatorio) // This will display the control's name
    return;
  }
}

Answer 4

When looping through your form controls, you already have access to the property name by default which is represented by var campoObrigatorio. Therefore, the following code snippet should meet your requirements:

for(var campoObrigatorio in formulario.controls){
  if (formulario.get(campoObrigatorio).status === "INVALID") { // Using get for clarity
    console.log(campoObrigatorio) // This will display the control's name
    return;
  }
}

In Typescript, is there a way to retrieve the name of an object when working with object types?

Answer №1

Answer №2

Similar questions

The input argument must be of type 'PollModel', as the property 'pollId' is required and missing in the provided 'any[]' type

Tests in Angular2 are executed before the variables in compileComponents are initialized

Challenges encountered when trying to showcase API data in Angular 6

Header and footer that stick in place while content scrolls automatically

How can you connect a property to the output of a method in Vue.js when working with TypeScript and vue-property-decorator?

Encountering a Prettier error with React Native 0.71 and Typescript

Getting the specific nested array of objects element using filter in Angular - demystified!

AngularJS Dilemma: Virtual Machine Data Set but No Rendering in Sight

Troubleshooting Angular 7 Build Failure: Missing Typescript .d.ts Declaration Files for Ahead-of-Time Compilation

What is the general consensus on combining SWR with Redux - is it considered a best practice?

What is the best way to integrate Greensock CustomEase with TypeScript?

Webpack encountering module resolution issue with Stripe.js

ESLint encountered an issue while attempting to load the configuration "plugin:@angular-eslint/ng-cli-compat" for extension

Ways to output a React component using TypeScript

Steps for dynamically assigning component references in Angular 4

Fetching DataItem from a Kendo Grid using a custom button in an Angular application

Encountered a problem while attempting to create a new Angular project due to an unexpected termination of JSON input during parsing

There was an issue encountered while trying to execute npm install, resulting in the error message: "This is a glitch

Changes to the value of an Angular FormControl will automatically trigger changes in the entire formgroup

Angular2 implementation of scroll spy feature for CKEditor