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);    
}
angulartypescriptangular6

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

Leverage context to facilitate communication between components operating at various levels of the system

I am currently working on the settings pages of my applications. Each page features a common SettingsLayout (parent component) that is displayed across all settings pages. One unique aspect of this layout is the presence of an ActionsBar, where the submit/ ...

reactjstypescriptreact-hooksnext.jsreact-context

how to navigate to a different page programmatically upon selecting an option in the side menu

ionic start mySideMenu sidemenu --v2 After creating a sidemenu using the code above, I implemented some login-logout functionality by storing user details in a localStorage variable named "userDetails". When clicking on the logout option from the sideme ...

angulartypescriptionic-frameworkionic2

What is the best way to overload a function based on the shape of the argument object in

If I am looking to verify the length of a string in two different ways (either fixed or within a specific range), I can do so using the following examples: /* Fixed check */ check('abc', {length: 1}); // false check('abc', {length: 3}) ...

typescriptfunctionoverloading

Having trouble resolving 'primeng/components/utils/ObjectUtils'?

I recently upgraded my project from Angular 4 to Angular 6 and everything was running smoothly on localhost. However, during the AOT-build process, I encountered the following error: ERROR in ./aot/app/home/accountant/customercost-form.component.ngfactory. ...

htmlangulartypescriptmigrationangular-aot

How can I establish default values for 2 to 3 options in a Dropdownlist?

Is there a way to set two values as default in a dropdown list, and when the page is refreshed, the last two selected values are retained as defaults? Thanks in advance! Visit this link for more information ...

htmlangulartypescriptangular7

Encountered a problem while installing an npm package for Angular 2

I seem to be encountering an error when trying to run the npm install command in the command prompt behind my corporate proxy firewall. Previously, I was able to edit the npm file with the proxy settings, but now I receive this error no matter what npm com ...

npmangularnpm-install

Nesting two ngFor loops in Angular using the async pipe leads to consistent reloading of data

In my Angular application, I am trying to retrieve a list of parent elements and then for each parent, fetch its corresponding children (1 parent to n children). Parent Child1 Child2 Parent Child1 Parent3 Child1 Child2 Child3 Initially, I succes ...

angularasynchronousrxjspipeobservable

Circular reference in Angular/TypeScript

I encountered a circular dependency issue in my Angular project and tried various solutions, including exporting all dependent classes from a "single file" as suggested here. Unfortunately, this approach did not work for me. I then explored other solutions ...

javascriptangulartypescriptdependency-injectioncircular-dependency

Can you provide information on the latest stable release of animations for Angular 4?

Encountering an error during npm install Warning - @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. Error encountered during npm start Issue with node_modules/@angular/platform-browser/animations ...

angularanimationnpm-install

Angular2 form builder generating dynamic forms based on results of asynchronous calls

When creating my form, I encountered a challenge with passing the results of an asynchronous call to the form builder. This is what I have attempted: export class PerformInspectionPage implements OnInit { checklists: any; inspectionform: FormGroup; n ...

angulartypescript

How to access parent slider variables in an Angular component

I've developed a slider as the parent component with multiple child components. See the demo here: https://stackblitz.com/edit/angular-ivy-gcgxgh?file=src/app/slide2/slide2.component.html Slider in the parent component: <ng-container *ngFor=&quo ...

angulartypescript

Mastering the art of chaining concatMaps in RxJS within AngularorUnlock

this.route.params.pipe( concatMap((param) => { const ein = param['nonprofit-id']; return this.nonprofitService.getNonprofit(ein).pipe( switchMap((nonprofit) => { this.nonprofit = nonprofit; ...

angularrxjsconcatmap

How can I modify the appearance of folders in FileSystemProvider?

I have created an extension for vscode that includes a virtual filesystem with fake directories and files. While the extension is functioning properly, I am facing some challenges in customizing certain aspects due to lack of documentation. 1) I need to u ...

typescriptvisual-studio-codevscode-extensions

Enhance your Fastify routes by incorporating Swagger documentation along with specific tags and descriptions

Currently, I am utilizing fastify 3.28.0 in conjunction with the fastify-swagger plugin and typescript 4.6.2. My goal is to include tags, descriptions, and summaries for each route. As per the documentation found here, it should be possible to add descrip ...

node.jstypescriptswaggerfastify

How can you implement a null filter in the mergeMap function below?

I created a subscription service to fetch a value, which was then used to call another API. However, the initial subscription API has now changed and the value can potentially be null. How should I handle this situation? My code is generating a compile e ...

typescriptrxjsngrxngrx-effectsrxjs-pipeable-operators

Refresh the child component whenever there is a change in the parent's state

As of now, I am in the process of developing a MultiCheckbox Component which looks like this: Checkbox.tsx import './Checkbox.scss'; import React, {ChangeEvent, Component} from 'react'; /* * Description of Checkbox properties */ in ...

reactjstypescriptcomponents

Tips for creating a sequelize transaction in TypeScript

I am currently working with sequelize, node js, and TypeScript. I am looking to convert the following command into TypeScript. return sequelize.transaction().then(function (t) { return User.create({ firstName: 'Homer', lastName: ' ...

node.jstypescriptsequelize.js

Error in Angular2 routes: Unable to access the 'forRoot' property

angular2 rc.5 I encountered a problem with TypeError: Cannot read property 'forRoot' of undefined(…) after investigating, I discovered that RouterModule is appearing as undefined during execution. This is my app.route.ts: import {Routes, Rou ...

angularangular2-routing

Convert the generic primitive type to a string

Hello, I am trying to create a function that can determine the primitive type of an array. However, I am facing an issue and haven't been able to find a solution that fits my problem. Below is the function I have written: export function isGenericType ...

typescripttypescript-typings

What is the best way to transfer a variable between components in Angular without using the HTML page, directly within the components themselves?

Within the child component, I am working with a string: @Input() helloMessage:string; I am looking to assign a value to this string from another string in the parent component and utilize it within the child component without displaying the value in the h ...

angulartypescriptvariablesinputcomponents