Build error: Property 'controls' does not exist on type 'AbstractControl'

Question

I'm getting this error while running the nativescript application.

Having issue in the nested form group. What is the reason behind the issue. I have attached my error image below,

Kindly give solution for this issue.

ts code:

import { FormGroup, FormBuilder, AbstractControl, Validators } from "@angular/forms";

@Component({
    selector:"login",
    moduleId:module.id,
    templateUrl:"./login.component.html",
    styleUrls:["./login.component.css"],
})


export class LoginComponent implements OnInit
{
loginFormGroupNew:FormGroup;
    mobileNumber:AbstractControl;
    mobileOTP:AbstractControl;
    email:AbstractControl;
    name:AbstractControl;
    .
    .
    .
    constructor(private authService:AuthenticationService, private routerExtensions:RouterExtensions,private page:Page,private formbuilder: FormBuilder){
        this.conn = new Connections();
        this.feedmodel = new FeedbackModel();
        this.loginFormGroupNew = this.formbuilder.group({
            loginFormGroup:this.formbuilder.group({
                mobileGroup:this.formbuilder.group({
                    // mobileNumber: ["",[Validators.required]]
                    mobileNumber: ["",[Validators.required],[Validation.validateMobile]]
                }),
                mobileOTP:["",[Validators.required],[Validation.validateotp]]
            }),
            email:["",[Validators.required],[Validation.validateEmail]],
            name:["",[Validators.required]]
        });
        
    }

 ngOnInit(){   
        if(isAndroid){
            this.platform=true;
        }else{
            this.platform=false;
        }
        this.page.actionBarHidden = true;
        this.login = this.page.getViewById("login");     
    }
    .
    .
    .
    .

  ResendOTP(){
    this.loginFormGroupNew.controls.loginFormGroup['controls'].mobileGroup.get('mobileNumber').enable();
    this.loginFormGroupNew.controls.loginFormGroup.get('mobileOTP').reset();
    if (!this.conn.getConnectionStatus()){
        // Toast.makeText("Please check your internet connection").show();
        this.feedmodel.showError("Info","Please check your internet connection");
        return;
    }
    this.SendOTP(true);
}

 }
    

Answer 1

loginFormGroupNew.controls returns an AbstractControl[].

So even if the control loginFormGroup control that your are getting is a FormGroup, Typescript doesn't have a way to infer it.

The easier way to get a control from a FormGroup is to use the method get() since it even allows you to get references to nested controls. In your case you could use:

loginFormGroupNew.get('loginFormGroup.mobileOTP')

to get the mobileOTP control reference directly.

---

To avoid repeating this piece of code multiple times in your template to get the reference to that same control, you can create a getter in your class and use that in the template.

get mobileOTPControl(): FormControl {
  return this.loginFormGroupNew.get('loginFormGroup.mobileOTP') as FormControl;
}

...

<Image ... *ngIf="mobileOTPControl.errors" ...>

This way you can cast the control to the correct type and if in the future your form model changes, you just need to adjust the access to that control just in one place.

cheers