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 :
<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's Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="Company's 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 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)
This question is related to
angular
typescript
angular-forms
In your HTML code
<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 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.
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.
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
.
<form [formGroup]="questionsForm">
<ng-container *ngFor="let question of questions">
<mat-form-field [formControlName]="question.id" ngDefaultControl>
<mat-label>{{question.questionContent}}</mat-label>
<textarea matInput rows="3" required></textarea>
</mat-form-field>
</ng-container>
<button mat-raised-button (click)="sendFeedback()">Submit all questions</button>
</form>
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)
}
}
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"
<form class="upload-form" [formGroup]="UploadForm">
<div class="row">
<div class="form-group col-sm-6">
<label for="fileName">File Name</label>
<!-- *** *** *** Adding [(ngModel)]="FileName" fixed the issue-->
<input type="text" class="form-control" id="fileName" [(ngModel)]="FileName"
placeholder="Enter file name" formControlName="fileName">
</div>
<div class="form-group col-sm-6">
<label for="selectedType">File Type</label>
<select class="form-control" formControlName="selectedType" id="selectedType"
(change)="TypeChanged(selectedType)" name="selectedType" disabled="true">
<option>Type 1</option>
<option>Type 2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="fileUploader">Select {{selectedType}} file</label>
<input type="file" class="form-control-file" id="fileUploader" (change)="onFileSelected($event)">
</div>
<div class="w-80 text-right mt-3">
<button class="btn btn-primary mb-2 search-button cancel-button" (click)="cancelUpload()">Cancel</button>
<button class="btn btn-primary mb-2 search-button" (click)="uploadFrmwrFile()">Upload</button>
</div>
</form>
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: ['']})
});
}
you're missing group nested controls with formGroupName
directive
<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>
Source: Stackoverflow.com