找不到具有名称的控件：角反应形式的 formControlName

Question

我在 stackoverflow 的许多问题中都发现了这个问题，但没有运气。请帮助我找出我做错了什么。

在组件中：

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 [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>

一切都应该是正确的，但是当我加载页面时发现错误

找不到具有名称的控件：'website'、'street'、'mobile'、'email'、'pageId'

浏览器控制台的完整错误页面如下：

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)

Answer 1

更正 formGroup，使其与 formControlName 匹配。

Answer 2

您缺少带有 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>

Answer 3

对我来说，控件名称的大小写不同

在 html 中是 accountID 和 ts 文件是 accountId 更改大小写以匹配两者都解决了我的情况。

Answer 4

我也遇到了这个错误，你帮我解决了。 如果 formGroup 或 formGroupName 没有写好大小写，则找不到控件的名称。 改正formGroup或formGroupName的大小写就OK了。

Answer 5

我尝试动态生成表单，因为问题的数量取决于对象，对我来说，当我将 ngDefaultControl 添加到我的 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>

在 sendFeedback() 中，我通过选择表单组的值来从动态表单中获取值

  sendFeedbackAsAgent():void {
    if (this.questionsForm.valid) {
      console.log(this.questionsForm.value)
    }
  }

Answer 6

在您的 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>

在您的 Typescript 代码中

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

这很好用，不会出错。

Answer 7

对我来说，即使使用[formGroup]，错误也会弹出“Cannot find control with name:''"。
当我将ngModel值与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>

在控制器中

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: ['']})
});
}

Answer 8

您应该为嵌套控件指定formGroupName

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

Plunker Example