The error in Angular 6 is that the property 'controls' is not available on the type 'AbstractControl'

What happens when we use setvalue in a for loop?

Everything seems to be running smoothly, but unfortunately an error is thrown:

The property 'controls' is not recognized on the type 'AbstractControl'.

In Angular 6, how can we resolve this issue?

for (let i = 0; i < this.experience.length; i++) 
  { 
     if (i !== 0) { 
       const control = <FormArray>this.expGroup.controls['expArray'];
       control.push(this.getExp()); 
     }
     
  this.expArray.at(i).controls['company_Name'].setValue(this.experience[i].company_Name);
  this.expArray.at(i).controls['position'].setValue(this.experience[i].position); 

  this.expArray.at(i).controls['employee_id'].setValue(this.experience[i].employee_id); 

  this.expArray.at(i).controls['time_prefered'].setValue(this.experience[i].time_prefered);   
  this.expArray.at(i).controls['work_exp_year'].setValue(this.experience[i].work_exp_year);   
  this.expArray.at(i).controls['date_of_joining'].setValue(this.experience[i].date_of_joining);   
  this.expArray.at(i).controls['id'].setValue(this.experience[i].id);    
}

Answer №1

If you want to access the controls property of each FormArray element, it is recommended to use a getter instead of directly accessing it. When iterating through the FormArray by index, each array element is exposed as type AbstractControl which does not directly have access to the controls property. Thus, you can use the following code -

this.expArray.at(i).get('company_Name').setValue(this.experience[i].company_Name);

This code will set the value for each control inside the FormArray.

Below is the complete code snippet -


for (let i = 0; i < this.experience.length; i++) { 
    if (i !== 0) {
        const control = <FormArray>this.expGroup.controls['expArray'];
        control.push(this.getExp()); 
    }
    
    this.expArray.at(i).get('company_Name').setValue(this.experience[i].company_Name); 
    this.expArray.at(i).get('position').setValue(this.experience[i].position); 
    this.expArray.at(i).get('employee_id').setValue(this.experience[i].employee_id); 
    this.expArray.at(i).get('time_prefered').setValue(this.experience[i].time_prefered);
    this.expArray.at(i).get('work_exp_year').setValue(this.experience[i].work_exp_year);
    this.expArray.at(i).get('date_of_joining').setValue(this.experience[i].date_of_joining);   
    this.expArray.at(i).get('id').setValue(this.experience[i].id);    

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to locate the module in React Native with TypeScript configuration

Currently, I am in the middle of transitioning our react-native project from JavaScript to TypeScript. As I attempt to import old modules, I keep encountering the following error: Cannot find module 'numeral' Oddly enough, the 'numeral&apo ...

Testing Angular application with a currency pipe results in an error stating "currency

Utilizing the built-in angular currency pipe in my components works perfectly fine. However, when attempting to unit test my component, an error occurs: https://i.stack.imgur.com/J18JL.png I am using Angular 10 with Ivy and have imported the CommonModule, ...

Using Firebase: retrieving getAdditionalUserInfo in onCreate of a Firebase Cloud function

Can anyone help me figure out how to retrieve extra data from a SAML login provider in the backend (firebase functions)? I can see the data on the client side but I'm struggling to access it in the backend. I've specified these dependencies for ...

Failing unit test for ngrx effect with { dispatch: false } setting and action returned by the effect

Take a look at this code snippet: loadProducts$ = createEffect(() => this.actions$.pipe( ofType(requestLoadProducts), switchMap(action => this.service.load().pipe( map(data => loadProducts({products: data})) )) ) , { dispatch ...

What steps do I need to take for webpack to locate angular modules?

I'm currently in the process of setting up a basic application using Angular 1 alongside Typescript 2 and Webpack. Everything runs smoothly until I attempt to incorporate an external module, such as angular-ui-router. An error consistently arises ind ...

Typescript is failing to return nested types when attempting to return a nested object

My goal is for my function to return a nested type of Content, but it's not working even though the type that should be returned is known. Let's take a look at an example: type Content = { some: { extra: string; prop: number; ...

Is it possible to use an object's attribute as a switch case in TypeScript with useReducer?

I am attempting to convert switch case String into an object, but for some reason typescript is misunderstanding the switch case within useReducer: Prior to version update, everything was functioning correctly: export const LOGIN_USER = "LOGIN_USER&qu ...

Errors in typing occurring due to preact children within framer-motion

While working on my preact widget (https://github.com/preactjs-templates/widget), I noticed a connection to ReactDOM. import { motion } from 'framer-motion'; import { h, VNode } from 'preact'; const Test = () => { return <mot ...

Utilize IDE's capabilities to recommend mutations and actions during the process of committing or dispatching

In my current Vue 3 Typescript project, I am utilizing Vuex. The code snippet below showcases how I have implemented it: import { createStore, useStore as baseUseStore, Store } from 'vuex'; import { InjectionKey } from 'vue'; export i ...

When incorporating @tailwind base, the PrimeNG styles fail to take effect

I have been immersed in a project that combines Angular and Tailwind CSS, and we recently made the decision to incorporate PrimeNG for its useful components. However, we encountered an issue where the styles from PrimeNG were not being applied despite be ...

Preventing Component Reuse in Angular 2 RC2 version "2.0.0-rc.2 (2016-06-15)"

During my work with angular 2 RC1 version, I encountered a situation where I needed to implement navigation within nested structures. Specifically, I wanted to be able to navigate from one Component (A) to the same Component (A), but without Angular reusin ...

Allow exclusively certain type to pass through the function

Is it possible to receive an error message from the function in the following example? I have included comments at a relevant spot in the code below: interface Pos { x: number, y: number, } function doSome(pos: Pos) { return pos.x + pos.y } let p ...

NextJS function utilizes its own references within React and automatically fetches data without the need for an import

I recently purchased this template and I'm trying to figure out which page the code snippet "{getLayout(<Component {...pageProps} />)}" is directed to during the initial load. It seems like it might be a global variable hidden somewher ...

The matHeaderRowDef property binding is not being utilized by any directive within the embedded template

Check out the HTML table below: <mat-table matSort class="inbox__messages" #table [dataSource]="dataSource"> <!-- Creating Column --> <ng-container matColumnDef="building"> <mat-header-cell *matHeaderCe ...

It is possible that req.user may be undefined, especially when using express and passport.js

I am facing an issue with my Node.js TypeScript authentication system that utilizes passport. The problem arises when I attempt to access req.user in a specific route, resulting in the error message: Object is possibly 'undefined'. This behavio ...

The TypeScript compiler is unable to locate the name 'window'

Within my Meteor/React project, I encounter the following line of code: let gameId = window.prompt("Please input the ID of the game you would like to load."); The TypeScript compiler presents an error during transpiling: Cannot find name 'window&apo ...

A guide on incorporating jQuery alert messages into Angular 2

Whenever I submit a form by clicking on the "send message" button, I want to display an Alert message using jQuery. However, currently, I have to double click for the alert message to appear. How can I make it so that the alert message is shown with just o ...

Outputting a JS file per component using Rollup and Typescript

Currently, I am in the process of developing a component library using React, TypeScript, and Rollup. Although bundling all components into a single output file index.js is functioning smoothly, I am facing an issue where individual components do not have ...

Typescript does not process and compile files located within a specified directory

Recently, I embarked on a small TypeScript project and took the time to create the tsconfig.json configuration file. { "compilerOptions": { "target": "es5", "module": "commonjs", "sourceMap": true }, "files": [ "./typings/index.d.ts" ...

Calculating the sum of values in a JSON array using a specific parameter in Typescript

A flat JSON array contains repetitive identifier, categoryId, and category: data: [ { "identifier": "data", "categoryId": "1", "category": "Baked goods", "product": "Aunt Hattie's", "price": "375" } ...