Error: Cannot find control with name:

Hi Guys ,

In this blog I will share information related to error :

Error: Cannot find control with name:

The complete error log is as follows :


StatusComponent.html:2 ERROR Error: Cannot find control with name: 'sname'
    at _throwError (shared.ts:140)
    at setUpControl (shared.ts:36)
    at FormGroupDirective.addControl (form_group_directive.ts:132)
    at FormControlName._setUpControl (form_control_name.ts:278)
    at FormControlName.ngOnChanges (form_control_name.ts:207)
    at checkAndUpdateDirectiveInline (provider.ts:208)
    at checkAndUpdateNodeInline (view.ts:429)
    at checkAndUpdateNode (view.ts:389)
    at debugCheckAndUpdateNode (services.ts:431)
    at debugCheckDirectivesFn (services.ts:392)


You may get this error while using reactive Forms in Angular
Lets look at the code which caused this error .

import { Component, OnInit } from '@angular/core';

import { FormControl , FormGroup} from '@angular/forms';

@Component({

  selector: 'app-status',

  templateUrl: './status.component.html',

  styleUrls: ['./status.component.css']

})

export class StatusComponent implements OnInit {

  statusForm = new FormGroup(

    {

      fname : new FormControl('')

    }

  );

  

  constructor() { }

  ngOnInit() {

  }

  updateStatus() {

     

  }

}

<p>   {{statusForm.fname}} </p>

<form [formGroup]="statusForm">

<label>

  First Name 

  <input type="text"  formControlName="fname">

Second Name 

  <input type="text"  formControlName="sname">

</label>

 

</form>

You can see we have two form controls in the HTML but only one form control in Controller .



Lets fix this error . We need to add another FormControl to a FormGroup .

The working code is as below .

import { Component, OnInit } from '@angular/core';

import { FormControl , FormGroup} from '@angular/forms';

@Component({

  selector: 'app-status',

  templateUrl: './status.component.html',

  styleUrls: ['./status.component.css']

})

export class StatusComponent implements OnInit {

  statusForm = new FormGroup(

    {

      fname : new FormControl(''),

       sname : new FormControl('')

    }

  );

  

  constructor() { }

  ngOnInit() {

  }

  updateStatus() {

     

  }

}

Hope this helps . Thanks !

TypeError: Cannot convert undefined or null to object

Hi Guys ,

In this blog I will share information related to error :

TypeError: Cannot convert undefined or null to object.

The complete error log is as follows :

main.ts:13 TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at FormGroup._forEachChild (model.ts:1526)
    at FormGroup._setUpControls (model.ts:1531)
    at new FormGroup (model.ts:1258)
    at new StatusComponent (VM2760 status.component.ts:16)
    at createClass (provider.ts:268)
    at createDirectiveInstance (provider.ts:136)
    at createViewNodes (view.ts:303)
    at callViewAction (view.ts:636)
    at execComponentViewsAction (view.ts:559)
eval @ main.ts:13



You may get this error while using reactive Forms in Angular
Lets look at the code which caused this error .

statusForm = new FormGroup();

You can see the formGroup object is created without passing any parameter to it .

Lets fix this error . We need to add a FormControl to a FormGroup .

The working code is as below .

statusForm = new FormGroup(

    {

      fname : new FormControl('')

    }

  );

Hope this helps .Thanks!