All geek questions in one place

Cannot find a control named: formControlName in angular 2 or 4

I found this problem in many questions on stackoverflow, but no luck. Please help me figure out what I'm 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]], }), });

The form:

 <form [formGroup]="companyCreatForm" (ngSubmit)="creat_company()" novalidate class="form-horizontal"> <div class="panel panel-default" *ngIf="generalPanel"> <div class="panel-heading">General Info</div> <div class="panel-body"> <div class="form-group"> <label for="comapny name" class="col-sm-3 control-label">Company Name</label> <div class="col-sm-8"> <input type="text" class="form-control" placeholder="Company Name" formControlName="name" #refName> <div *ngIf="companyCreatForm.controls['name'].hasError('required') && refName.touched" class="alert alert-danger"> please enter name </div> <div *ngIf="companyCreatForm.controls['name'].hasError('minlength')" class="alert alert-danger"> please enter at least 5 characters </div> </div> </div> <div class="form-group"> <label for="business type" class="col-sm-3 control-label">Business type</label> <div class="col-sm-8"> <select name="businessType" formControlName="businessType" class="form-control" [(ngModel)]="defaultType"> <option *ngFor="let type of businessTypes" [value]="type.id">{{type.name}}</option> </select> </div> </div> <div class="form-group"> <label for="about" class="col-sm-3 control-label">Add Company Description</label> <div class="col-sm-8"> ​<textarea formControlName="about" class="form-control" id="txtArea" rows="6" cols="70"></textarea> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Contact Info</div> <div class="panel-body"> <div class="form-group"> <label for="address" class="col-sm-3 control-label">Business Address</label> <div class="col-sm-8"> <input type="text" class="form-control" formControlName="street" placeholder="Business Address"> </div> </div> <div class="form-group"> <label for="website" class="col-sm-3 control-label">Website</label> <div class="col-sm-8"> <input type="text" class="form-control" formControlName="website" placeholder="website"> </div> </div> <div class="form-group"> <label for="telephone" class="col-sm-3 control-label">Telephone</label> <div class="col-sm-8"> <input type="text" class="form-control" formControlName="mobile" placeholder="telephone"> </div> </div> <div class="form-group"> <label for="email" class="col-sm-3 control-label">Email</label> <div class="col-sm-8"> <input type="text" class="form-control" formControlName="email" placeholder="email"> </div> </div> <div class="form-group"> <label for="page id" class="col-sm-3 control-label">Facebook Page ID</label> <div class="col-sm-8"> <input type="text" class="form-control" formControlName="pageId" placeholder="facebook page id"> </div> </div> <div class="form-group"> <label for="about" class="col-sm-3 control-label"></label> <div class="col-sm-3">​ <!--span class="btn btn-success form-control" (click)="openGeneralPanel()">Back</span--> </div> <label for="about" class="col-sm-2 control-label"></label> <div class="col-sm-3"> ​<button class="btn btn-success form-control" [disabled]="companyCreatForm.invalid" (click)="openContactInfo()">Continue</button> </div> </div> </div> </div> </form>

Everything should be correct, but when I load the page search error

Cannot find a control with the name: "site", "street", "mobile", "email", "pageId"

The full error page from the browser console is as follows:

 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)
+5
source share
3 answers

You must specify formGroupName for nested controls

 <div class="panel panel-default" formGroupName="address"> <== add this <div class="panel-heading">Contact Info</div>

Plunger example

+13
source

you do not have group nested controls with the directive formGroupName

 <div class="panel-body" formGroupName="address"> <div class="form-group"> <label for="address" class="col-sm-3 control-label">Business Address</label> <div class="col-sm-8"> <input type="text" class="form-control" formControlName="street" placeholder="Business Address"> </div> </div> <div class="form-group"> <label for="website" class="col-sm-3 control-label">Website</label> <div class="col-sm-8"> <input type="text" class="form-control" formControlName="website" placeholder="website"> </div> </div> <div class="form-group"> <label for="telephone" class="col-sm-3 control-label">Telephone</label> <div class="col-sm-8"> <input type="text" class="form-control" formControlName="mobile" placeholder="telephone"> </div> </div> <div class="form-group"> <label for="email" class="col-sm-3 control-label">Email</label> <div class="col-sm-8"> <input type="text" class="form-control" formControlName="email" placeholder="email"> </div> </div> <div class="form-group"> <label for="page id" class="col-sm-3 control-label">Facebook Page ID</label> <div class="col-sm-8"> <input type="text" class="form-control" formControlName="pageId" placeholder="facebook page id"> </div> </div> <div class="form-group"> <label for="about" class="col-sm-3 control-label"></label> <div class="col-sm-3"> <!--span class="btn btn-success form-control" (click)="openGeneralPanel()">Back</span--> </div> <label for="about" class="col-sm-2 control-label"></label> <div class="col-sm-3"> <button class="btn btn-success form-control" [disabled]="companyCreatForm.invalid" (click)="openContactInfo()">Continue</button> </div> </div> </div>
+1
source

In your HTML

 <form [formGroup]="userForm"> <input type="text" class="form-control" [value]="item.UserFirstName" formControlName="UserFirstName"> <input type="text" class="form-control" [value]="item.UserLastName" formControlName="UserLastName"> </form>

In typescript

 export class UserprofileComponent implements OnInit { userForm: FormGroup; constructor(){ this.userForm = new FormGroup({ UserFirstName: new FormControl(), UserLastName: new FormControl() }); } }

This works fine, this is not a mistake.

+1
source

Source: https://habr.com/ru/post/1268658/

More articles:


All Articles