title: Cannot find control with name: formControlName in angular reactive form
body: <p>I found this problem in many questions in stackoverflow but no luck. Please help me for figuring out what I am doing wrong.</p>
  <p><strong>In component :</strong></p>
  <pre class="lang-ts prettyprint-override"><code>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]],
        }),
      });
  </code></pre>
  <p><strong>Form :</strong></p>
  <pre class="lang-xml prettyprint-override"><code>&lt;form [formGroup]=&quot;companyCreatForm&quot; (ngSubmit)=&quot;creat_company()&quot; novalidate class=&quot;form-horizontal&quot;&gt;
      &lt;div class=&quot;panel panel-default&quot; *ngIf=&quot;generalPanel&quot;&gt;
          &lt;div class=&quot;panel-heading&quot;&gt;General Info&lt;/div&gt;
          &lt;div class=&quot;panel-body&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;comapny name&quot; class=&quot;col-sm-3 control-label&quot;&gt;Company's Name&lt;/label&gt;
                  &lt;div class=&quot;col-sm-8&quot;&gt;
                      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Company's Name&quot; formControlName=&quot;name&quot; #refName&gt;
                      &lt;div *ngIf=&quot;companyCreatForm.controls['name'].hasError('required') &amp;&amp; refName.touched&quot; class=&quot;alert alert-danger&quot;&gt;
                          please enter name
                      &lt;/div&gt;
                      &lt;div *ngIf=&quot;companyCreatForm.controls['name'].hasError('minlength')&quot; class=&quot;alert alert-danger&quot;&gt;
                          please enter at least 5 characters
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;business type&quot; class=&quot;col-sm-3 control-label&quot;&gt;Business type&lt;/label&gt;
                  &lt;div class=&quot;col-sm-8&quot;&gt;
                      &lt;select name=&quot;businessType&quot; formControlName=&quot;businessType&quot; class=&quot;form-control&quot; [(ngModel)]=&quot;defaultType&quot;&gt;
                          
                          &lt;option  *ngFor=&quot;let type of businessTypes&quot; [value]=&quot;type.id&quot;&gt;{{type.name}}&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;about&quot; class=&quot;col-sm-3 control-label&quot;&gt;Add Company Description&lt;/label&gt;
                  &lt;div class=&quot;col-sm-8&quot;&gt;
                      ​&lt;textarea formControlName=&quot;about&quot; class=&quot;form-control&quot; id=&quot;txtArea&quot; rows=&quot;6&quot; cols=&quot;70&quot;&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;panel panel-default&quot;&gt;
          &lt;div class=&quot;panel-heading&quot;&gt;Contact Info&lt;/div&gt;
          &lt;div class=&quot;panel-body&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;address&quot; class=&quot;col-sm-3 control-label&quot;&gt;Business Address&lt;/label&gt;
                  &lt;div class=&quot;col-sm-8&quot;&gt;
                      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; formControlName=&quot;street&quot; placeholder=&quot;Business Address&quot;&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;website&quot; class=&quot;col-sm-3 control-label&quot;&gt;Website&lt;/label&gt;
                  &lt;div class=&quot;col-sm-8&quot;&gt;
                      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; formControlName=&quot;website&quot; placeholder=&quot;website&quot;&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;telephone&quot; class=&quot;col-sm-3 control-label&quot;&gt;Telephone&lt;/label&gt;
                  &lt;div class=&quot;col-sm-8&quot;&gt;
                      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; formControlName=&quot;mobile&quot; placeholder=&quot;telephone&quot;&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;email&quot; class=&quot;col-sm-3 control-label&quot;&gt;Email&lt;/label&gt;
                  &lt;div class=&quot;col-sm-8&quot;&gt;
                      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; formControlName=&quot;email&quot; placeholder=&quot;email&quot;&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;page id&quot; class=&quot;col-sm-3 control-label&quot;&gt;Facebook Page ID&lt;/label&gt;
                  &lt;div class=&quot;col-sm-8&quot;&gt;
                      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; formControlName=&quot;pageId&quot; placeholder=&quot;facebook page id&quot;&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;about&quot; class=&quot;col-sm-3  control-label&quot;&gt;&lt;/label&gt;
                  &lt;div class=&quot;col-sm-3&quot;&gt;
                      ​
                      &lt;!--span class=&quot;btn btn-success form-control&quot; (click)=&quot;openGeneralPanel()&quot;&gt;Back&lt;/span--&gt;
                  &lt;/div&gt;
                  &lt;label for=&quot;about&quot; class=&quot;col-sm-2  control-label&quot;&gt;&lt;/label&gt;
                  &lt;div class=&quot;col-sm-3&quot;&gt;
                      ​&lt;button class=&quot;btn btn-success form-control&quot; [disabled]=&quot;companyCreatForm.invalid&quot; (click)=&quot;openContactInfo()&quot;&gt;Continue&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Everything should be right but when I load page find error</p>
  <blockquote>
  <p>Cannot find control with name: 'website' ,'street', 'mobile', 'email','pageId'</p>
  </blockquote>
  <p><em><strong>Full error page from browser console is like below:</strong></em></p>
  <pre><code>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)
  </code></pre>