在 angular 反应形式中找不到名称为 formControlName 的控件

Question

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

在组件中：

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>

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

Cannot find control with name: '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

您应该为嵌套控件指定 formGroupName

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

Plunker Example

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 代码中

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

对我来说，即使 [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 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

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

Answer 7

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

在html中是账户ID，ts文件是账户Id 更改大小写以匹配两者解决了我的问题。

Answer 8

更正 formGroup，使其与 formControlName 匹配。

Answer 9

问题的长短在于，必须使用与 AutoMapperProfile 相同的字段显式映射所有数据库字段。

这也包括表单字段，它们也应该与您的模型属性同名。来自您的表单的任何模型中的条目必须与在您的数据库条目中找到的条目相同。

即如果您的 AutoMapper 配置文件为您的模型列出了 8 个字段，那么您的表单应该有八个字段。然后，您将该模型保存到数据库中，也包含八个字段。

应该处理大部分...

在 angular 反应形式中找不到名称为 formControlName 的控件

Cannot find control with name: formControlName in angular reactive form

typescript

angular

angular-forms