Property ‘controls’ does not exist on type ‘abstractcontrol‘.

“`html

The error message “property ‘controls’ does not exist on type ‘abstractcontrol‘” is a TypeScript error message that occurs when you are trying to access the ‘controls’ property on an instance of an ‘AbstractControl’ class, but the TypeScript compiler cannot find the ‘controls’ property in the type definition for ‘AbstractControl’.

The ‘AbstractControl’ class is a base class for form controls in Angular, and it provides the common functionality for form controls, such as validation and value management.

The error message typically occurs when you are trying to access the ‘controls’ property on a FormGroup or a FormArray instance, which are both subclasses of ‘AbstractControl’. The ‘controls’ property is used to access the child controls of a FormGroup or a FormArray.

To fix this error, you need to ensure that you are working with the correct type when accessing the ‘controls’ property. Here are a few examples:

Example 1: Creating a new FormGroup instance
“`typescript
import { Component, OnInit } from ‘@angular/core’;
import { FormGroup, FormControl, Validators } from ‘@angular/forms’;

@Component({
selector: ‘app-my-form’,
template: `


`
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;

ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl(”, Validators.required)
});

// Accessing the ‘controls’ property on FormGroup
const controls = this.myForm.controls;
console.log(controls); // { name: FormControl }
}
}
“`

Example 2: Accessing FormArray controls
“`typescript
import { Component, OnInit } from ‘@angular/core’;
import { FormArray, FormControl } from ‘@angular/forms’;

@Component({
selector: ‘app-my-form-array’,
template: `

`
})
export class MyFormArrayComponent implements OnInit {
itemControls: FormArray;

ngOnInit() {
this.itemControls = new FormArray([
new FormControl(‘Item 1’),
new FormControl(‘Item 2’),
new FormControl(‘Item 3’)
]);

// Accessing the ‘controls’ property on FormArray
const controls = this.itemControls.controls;
console.log(controls); // [ FormControl, FormControl, FormControl ]
}
}
“`

In both examples, we are accessing the ‘controls’ property on the correct instance of a FormGroup or a FormArray and correctly retrieving the child controls. Make sure you are referencing the correct variable or property when accessing the ‘controls’ property.

I hope this explanation helps you understand the error and its solution. Let me know if you have any further questions!

“`

Related Post

Leave a comment