Cannot find control with name formControlName in angular reactive form

Question

I found this problem in many questions in stackoverflow but no luck  Please help me for figuring out what I am doing wrong    In component    ngOnInit         this companyCreatForm   this  formBuilder group         name   null   Validators required  Validators minLength 5           about   null   Validators required          businessType   null   Validators required          address  this  formBuilder group           street              website   null   Validators required            mobile   null   Validators required            email   null   Validators required            pageId   null   Validators required                        Form     lt form  formGroup   companyCreatForm   ngSubmit   creat company    novalidate class  form-horizontal  gt       lt div class  panel panel-default   ngIf  generalPanel  gt           lt div class  panel-heading  gt General Info lt  div gt           lt div class  panel-body  gt               lt div class  form-group  gt                   lt label for  comapny name  class  col-sm-3 control-label  gt Company s Name lt  label gt                   lt div class  col-sm-8  gt                       lt input type  text  class  form-control  placeholder  Company s Name  formControlName  name   refName gt                       lt div  ngIf  companyCreatForm controls  name   hasError  required    amp  amp  refName touched  class  alert alert-danger  gt                          please enter name                      lt  div gt                       lt div  ngIf  companyCreatForm controls  name   hasError  minlength    class  alert alert-danger  gt                          please enter at least 5 characters                      lt  div gt                   lt  div gt               lt  div gt                lt div class  form-group  gt                   lt label for  business type  class  col-sm-3 control-label  gt Business type lt  label gt                   lt div class  col-sm-8  gt                       lt select name  businessType  formControlName  businessType  class  form-control    ngModel    defaultType  gt                            lt option   ngFor  let type of businessTypes   value   type id  gt   type name   lt  option gt                       lt  select gt                   lt  div gt               lt  div gt                lt div class  form-group  gt                   lt label for  about  class  col-sm-3 control-label  gt Add Company Description lt  label gt                   lt div class  col-sm-8  gt                        lt textarea formControlName  about  class  form-control  id  txtArea  rows  6  cols  70  gt  lt  textarea gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt        lt div class  panel panel-default  gt           lt div class  panel-heading  gt Contact Info lt  div gt           lt div class  panel-body  gt               lt div class  form-group  gt                   lt label for  address  class  col-sm-3 control-label  gt Business Address lt  label gt                   lt div class  col-sm-8  gt                       lt input type  text  class  form-control  formControlName  street  placeholder  Business Address  gt                   lt  div gt               lt  div gt                lt div class  form-group  gt                   lt label for  website  class  col-sm-3 control-label  gt Website lt  label gt                   lt div class  col-sm-8  gt                       lt input type  text  class  form-control  formControlName  website  placeholder  website  gt                   lt  div gt               lt  div gt                lt div class  form-group  gt                   lt label for  telephone  class  col-sm-3 control-label  gt Telephone lt  label gt                   lt div class  col-sm-8  gt                       lt input type  text  class  form-control  formControlName  mobile  placeholder  telephone  gt                   lt  div gt               lt  div gt                lt div class  form-group  gt                   lt label for  email  class  col-sm-3 control-label  gt Email lt  label gt                   lt div class  col-sm-8  gt                       lt input type  text  class  form-control  formControlName  email  placeholder  email  gt                   lt  div gt               lt  div gt                lt div class  form-group  gt                   lt label for  page id  class  col-sm-3 control-label  gt Facebook Page ID lt  label gt                   lt div class  col-sm-8  gt                       lt input type  text  class  form-control  formControlName  pageId  placeholder  facebook page id  gt                   lt  div gt               lt  div gt                lt div class  form-group  gt                   lt label for  about  class  col-sm-3  control-label  gt  lt  label gt                   lt div class  col-sm-3  gt                                             lt  --span class  btn btn-success form-control   click   openGeneralPanel    gt Back lt  span-- gt                   lt  div gt                   lt label for  about  class  col-sm-2  control-label  gt  lt  label gt                   lt div class  col-sm-3  gt                        lt button class  btn btn-success form-control   disabled   companyCreatForm invalid   click   openContactInfo    gt Continue lt  button gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  form gt    Everything should be right but when I load page find error     Cannot find control with name   website    street    mobile    email   pageId    Full error page from browser console is like below   CompanyCreateComponent html 69 ERROR CONTEXT DebugContext   view  Object  nodeIndex  69  nodeDef  Object  elDef  Object  elView  Object  View CompanyCreateComponent 0   CompanyCreateComponent html 69 proxyClass   compiler es5 js 14091 DebugContext  logError   core es5 js 13124 ErrorHandler handleError   core es5 js 1149 ApplicationRef  tick   core es5 js 5060  anonymous    core es5 js 4933 ZoneDelegate invoke   zone js 381 onInvoke   core es5 js 4128 ZoneDelegate invoke   zone js 380 Zone run   zone js 141 NgZone run   core es5 js 3996 next   core es5 js 4933 schedulerFn   core es5 js 3830 SafeSubscriber   tryOrUnsub   Subscriber js 238 SafeSubscriber next   Subscriber js 185 Subscriber  next   Subscriber js 125 Subscriber next   Subscriber js 89 Subject next   Subject js 55 EventEmitter emit   core es5 js 3816 NgZone checkStable   core es5 js 4093 NgZone setHasMicrotask   core es5 js 4177 onHasTask   core es5 js 4140 ZoneDelegate hasTask   zone js 434 ZoneDelegate  updateTaskCount   zone js 454 Zone  updateTaskCount   zone js 278 Zone runTask   zone js 198 drainMicroTaskQueue   zone js 574 ZoneTask invoke   zone js 480 CompanyCreateComponent html 76 ERROR Error  Cannot find control with name   mobile      at  throwError  forms es5 js 1830      at setUpControl  forms es5 js 1738      at FormGroupDirective addControl  forms es5 js 4711      at FormControlName  setUpControl  forms es5 js 5299      at FormControlName ngOnChanges  forms es5 js 5217      at checkAndUpdateDirectiveInline  core es5 js 10790      at checkAndUpdateNodeInline  core es5 js 12216      at checkAndUpdateNode  core es5 js 12155      at debugCheckAndUpdateNode  core es5 js 12858      at debugCheckDirectivesFn  core es5 js 12799  View CompanyCreateComponent 0   CompanyCreateComponent html 76 proxyClass   compiler es5 js 14091 DebugContext  logError   core es5 js 13124 ErrorHandler handleError   core es5 js 1144 ApplicationRef  tick   core es5 js 5060  anonymous    core es5 js 4933 ZoneDelegate invoke   zone js 381 onInvoke   core es5 js 4128 ZoneDelegate invoke   zone js 380 Zone run   zone js 141 NgZone run   core es5 js 3996 next   core es5 js 4933 schedulerFn   core es5 js 3830 SafeSubscriber   tryOrUnsub   Subscriber js 238 SafeSubscriber next   Subscriber js 185 Subscriber  next   Subscriber js 125 Subscriber next   Subscriber js 89 Subject next   Subject js 55 EventEmitter emit   core es5 js 3816 NgZone checkStable   core es5 js 4093 NgZone onLeave   core es5 js 4169 onInvoke   core es5 js 4131 ZoneDelegate invoke   zone js 380 Zone runGuarded   zone js 154  loop 1   zone js 640 api microtaskDrainDone   zone js 649 drainMicroTaskQueue   zone js 582 ZoneTask invoke   zone js 480 CompanyCreateComponent html 76 ERROR CONTEXT DebugContext   view  Object  nodeIndex  85  nodeDef  Object  elDef  Object  elView  Object  View CompanyCreateComponent 0   CompanyCreateComponent html 76 proxyClass   compiler es5 js 14091 DebugContext  logError   core es5 js 13124 ErrorHandler handleError   core es5 js 1149 ApplicationRef  tick   core es5 js 5060  anonymous    core es5 js 4933 ZoneDelegate invoke   zone js 381 onInvoke   core es5 js 4128 ZoneDelegate invoke   zone js 380 Zone run   zone js 141 NgZone run   core es5 js 3996 next   core es5 js 4933 schedulerFn   core es5 js 3830 SafeSubscriber   tryOrUnsub   Subscriber js 238 SafeSubscriber next   Subscriber js 185 Subscriber  next   Subscriber js 125 Subscriber next   Subscriber js 89 Subject next   Subject js 55 EventEmitter emit   core es5 js 3816 NgZone checkStable   core es5 js 4093 NgZone onLeave   core es5 js 4169 onInvoke   core es5 js 4131 ZoneDelegate invoke   zone js 380 Zone runGuarded   zone js 154  loop 1   zone js 640 api microtaskDrainDone   zone js 649 drainMicroTaskQueue   zone js 582 ZoneTask invoke   zone js 480 core es5 js 1084 ERROR Error  Uncaught  in promise   Error  Cannot find control with name   street  Error  Cannot find control with name   street      at  throwError  forms es5 js 1830      at setUpControl  forms es5 js 1738      at FormGroupDirective addControl  forms es5 js 4711      at FormControlName  setUpControl  forms es5 js 5299      at FormControlName ngOnChanges  forms es5 js 5217      at checkAndUpdateDirectiveInline  core es5 js 10790      at checkAndUpdateNodeInline  core es5 js 12216      at checkAndUpdateNode  core es5 js 12155      at debugCheckAndUpdateNode  core es5 js 12858      at debugCheckDirectivesFn  core es5 js 12799      at  throwError  forms es5 js 1830      at setUpControl  forms es5 js 1738      at FormGroupDirective addControl  forms es5 js 4711      at FormControlName  setUpControl  forms es5 js 5299      at FormControlName ngOnChanges  forms es5 js 5217      at checkAndUpdateDirectiveInline  core es5 js 10790      at checkAndUpdateNodeInline  core es5 js 12216      at checkAndUpdateNode  core es5 js 12155      at debugCheckAndUpdateNode  core es5 js 12858      at debugCheckDirectivesFn  core es5 js 12799      at resolvePromise  zone js 757      at resolvePromise  zone js 728      at zone js 805     at ZoneDelegate invokeTask  zone js 414      at Object onInvokeTask  core es5 js 4119      at ZoneDelegate invokeTask  zone js 413      at Zone runTask  zone js 181      at drainMicroTaskQueue  zone js 574      at HTMLButtonElement ZoneTask invoke  zone js 480  defaultErrorLogger   core es5 js 1084 ErrorHandler handleError   core es5 js 1144 next   core es5 js 4757 schedulerFn   core es5 js 3830 SafeSubscriber   tryOrUnsub   Subscriber js 238 SafeSubscriber next   Subscriber js 185 Subscriber  next   Subscriber js 125 Subscriber next   Subscriber js 89 Subject next   Subject js 55 EventEmitter emit   core es5 js 3816 NgZone triggerError   core es5 js 4188 onHandleError   core es5 js 4149 ZoneDelegate handleError   zone js 385 Zone runGuarded   zone js 157  loop 1   zone js 640 api microtaskDrainDone   zone js 649 drainMicroTaskQueue   zone js 582 ZoneTask invoke   zone js 480 CompanyCreateComponent html 83 ERROR Error  Cannot find control with name   email      at  throwError  forms es5 js 1830      at setUpControl  forms es5 js 1738      at FormGroupDirective addControl  forms es5 js 4711      at FormControlName  setUpControl  forms es5 js 5299      at FormControlName ngOnChanges  forms es5 js 5217      at checkAndUpdateDirectiveInline  core es5 js 10790      at checkAndUpdateNodeInline  core es5 js 12216      at checkAndUpdateNode  core es5 js 12155      at debugCheckAndUpdateNode  core es5 js 12858      at debugCheckDirectivesFn  core es5 js 12799  View CompanyCreateComponent 0   CompanyCreateComponent html 83 proxyClass   compiler es5 js 14091 DebugContext  logError   core es5 js 13124 ErrorHandler handleError   core es5 js 1144 ApplicationRef  tick   core es5 js 5060  anonymous    core es5 js 4933 ZoneDelegate invoke   zone js 381 onInvoke   core es5 js 4128 ZoneDelegate invoke   zone js 380 Zone run   zone js 141 NgZone run   core es5 js 3996 next   core es5 js 4933 schedulerFn   core es5 js 3830 SafeSubscriber   tryOrUnsub   Subscriber js 238 SafeSubscriber next   Subscriber js 185 Subscriber  next   Subscriber js 125 Subscriber next   Subscriber js 89 Subject next   Subject js 55 EventEmitter emit   core es5 js 3816 NgZone checkStable   core es5 js 4093 NgZone onLeave   core es5 js 4169 onInvokeTask   core es5 js 4122 ZoneDelegate invokeTask   zone js 413 Zone runTask   zone js 181 ZoneTask invoke   zone js 476 CompanyCreateComponent html 83 ERROR CONTEXT DebugContext   view  Object  nodeIndex  101  nodeDef  Object  elDef  Object  elView  Object  View CompanyCreateComponent 0   CompanyCreateComponent html 83 proxyClass   compiler es5 js 14091 DebugContext  logError   core es5 js 13124 ErrorHandler handleError   core es5 js 1149 ApplicationRef  tick   core es5 js 5060  anonymous    core es5 js 4933 ZoneDelegate invoke   zone js 381 onInvoke   core es5 js 4128 ZoneDelegate invoke   zone js 380 Zone run   zone js 141 NgZone run   core es5 js 3996 next   core es5 js 4933 schedulerFn   core es5 js 3830 SafeSubscriber   tryOrUnsub   Subscriber js 238 SafeSubscriber next   Subscriber js 185 Subscriber  next   Subscriber js 125 Subscriber next   Subscriber js 89 Subject next   Subject js 55 EventEmitter emit   core es5 js 3816 NgZone checkStable   core es5 js 4093 NgZone onLeave   core es5 js 4169 onInvokeTask   core es5 js 4122 ZoneDelegate invokeTask   zone js 413 Zone runTask   zone js 181 ZoneTask invoke   zone js 476 CompanyCreateComponent html 90 ERROR Error  Cannot find control with name   pageId      at  throwError  forms es5 js 1830      at setUpControl  forms es5 js 1738      at FormGroupDirective addControl  forms es5 js 4711      at FormControlName  setUpControl  forms es5 js 5299      at FormControlName ngOnChanges  forms es5 js 5217      at checkAndUpdateDirectiveInline  core es5 js 10790      at checkAndUpdateNodeInline  core es5 js 12216      at checkAndUpdateNode  core es5 js 12155      at debugCheckAndUpdateNode  core es5 js 12858      at debugCheckDirectivesFn  core es5 js 12799

User · Answer

For me even with  formGroup  the error was popping up  Cannot find control with name      It got fixed when I added ngModel Value to the input box along with formControlName  fileName      lt form class  upload-form   formGroup   UploadForm  gt     lt div class  row  gt       lt div class  form-group col-sm-6  gt         lt label for  fileName  gt File Name lt  label gt         lt  --             Adding   ngModel    FileName  fixed the issue-- gt         lt input type  text  class  form-control  id  fileName    ngModel    FileName          placeholder  Enter file name  formControlName  fileName  gt        lt  div gt       lt div class  form-group col-sm-6  gt         lt label for  selectedType  gt File Type lt  label gt         lt select class  form-control  formControlName  selectedType  id  selectedType            change   TypeChanged selectedType   name  selectedType  disabled  true  gt           lt option gt Type 1 lt  option gt           lt option gt Type 2 lt  option gt         lt  select gt       lt  div gt     lt  div gt     lt div class  form-group  gt       lt label for  fileUploader  gt Select   selectedType   file lt  label gt       lt input type  file  class  form-control-file  id  fileUploader   change   onFileSelected  event   gt     lt  div gt     lt div class  w-80 text-right mt-3  gt       lt button class  btn btn-primary mb-2 search-button cancel-button   click   cancelUpload    gt Cancel lt  button gt       lt button class  btn btn-primary mb-2 search-button   click   uploadFrmwrFile    gt Upload lt  button gt     lt  div gt    lt  form gt    And in the controller   ngOnInit     this UploadForm  new FormGroup     fileName  new FormControl  value  this FileName      selectedType  new FormControl  value  this selectedType  disabled  true   Validators required     frmwareFile  new FormControl  value

User · Answer

I tried to generate a form dynamically because the amount of questions depend on an object and for me the error was fixed when I added ngDefaultControl to my mat-form-field        lt form  formGroup   questionsForm  gt           lt ng-container  ngFor  let question of questions  gt               lt mat-form-field  formControlName   question id  ngDefaultControl gt                   lt mat-label gt   question questionContent   lt  mat-label gt                   lt textarea matInput rows  3  required gt  lt  textarea gt               lt  mat-form-field gt           lt  ng-container gt           lt button mat-raised-button  click   sendFeedback    gt Submit all questions lt  button gt       lt  form gt    In sendFeedback   I get the value from my dynamic form by selecting the formgroup s value as such    sendFeedbackAsAgent   void       if  this questionsForm valid          console log this questionsForm value

User · Answer

I also had this error  and you helped me solve it  If formGroup or formGroupName are not written with the good case  then the name of the control is not found  Correct the case of formGroup or formGroupName and it is OK

User · Answer

You should specify formGroupName for nested controls   lt div class  panel panel-default  formGroupName  address  gt   lt    add this      lt div class  panel-heading  gt Contact Info lt  div gt    Plunker Example

User · Answer

you re missing group nested controls with formGroupName directive   lt div class  panel-body  formGroupName  address  gt     lt div class  form-group  gt       lt label for  address  class  col-sm-3 control-label  gt Business Address lt  label gt       lt div class  col-sm-8  gt         lt input type  text  class  form-control  formControlName  street  placeholder  Business Address  gt       lt  div gt     lt  div gt     lt div class  form-group  gt       lt label for  website  class  col-sm-3 control-label  gt Website lt  label gt       lt div class  col-sm-8  gt         lt input type  text  class  form-control  formControlName  website  placeholder  website  gt       lt  div gt     lt  div gt     lt div class  form-group  gt       lt label for  telephone  class  col-sm-3 control-label  gt Telephone lt  label gt       lt div class  col-sm-8  gt         lt input type  text  class  form-control  formControlName  mobile  placeholder  telephone  gt       lt  div gt     lt  div gt     lt div class  form-group  gt       lt label for  email  class  col-sm-3 control-label  gt Email lt  label gt       lt div class  col-sm-8  gt         lt input type  text  class  form-control  formControlName  email  placeholder  email  gt       lt  div gt     lt  div gt     lt div class  form-group  gt       lt label for  page id  class  col-sm-3 control-label  gt Facebook Page ID lt  label gt       lt div class  col-sm-8  gt         lt input type  text  class  form-control  formControlName  pageId  placeholder  facebook page id  gt       lt  div gt     lt  div gt     lt div class  form-group  gt       lt label for  about  class  col-sm-3  control-label  gt  lt  label gt       lt div class  col-sm-3  gt         lt  --span class  btn btn-success form-control   click   openGeneralPanel    gt Back lt  span-- gt       lt  div gt       lt label for  about  class  col-sm-2  control-label  gt  lt  label gt       lt div class  col-sm-3  gt         lt button class  btn btn-success form-control   disabled   companyCreatForm invalid   click   openContactInfo    gt Continue lt  button gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

In your HTML code   lt form  formGroup   userForm  gt       lt input type  text  class  form-control    value   item UserFirstName  formControlName  UserFirstName  gt       lt input type  text  class  form-control    value   item UserLastName  formControlName  UserLastName  gt   lt  form gt    In  your Typescript code  export class UserprofileComponent implements OnInit       userForm  FormGroup      constructor            this userForm   new FormGroup             UserFirstName  new FormControl              UserLastName  new FormControl                        This works perfectly  it does not give any error

[angular] Cannot find control with name: formControlName in angular reactive form

Examples related to angular

Examples related to typescript

Examples related to angular-forms