1. 首页
  2. 问答
  3. 在角度2或4中找不到名称为formControlName的控件

在角度2或4中找不到名称为formControlName的控件

2017-06-08 51 views
4

我在stackoverflow中的许多问题中发现此问题，但没有运气。请帮我弄清楚我做错了什么。在角度2或4中找不到名称为formControlName的控件

在组件：

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'，'e邮件”， '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)

来源

2017-06-08 Amir

回答

12

你应该为嵌套控件

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

Plunker Example指定formGroupName

来源

2017-06-08 09:27:51 yurzui

+0

@yirzui 它没有工作？ – Kansara

+1

@Kansara它的作品 – yurzui

+0

@yirzui雅它的工作 – Kansara

1

你缺少组嵌套控制与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>

来源

2017-06-08 09:28:18

0

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

在您的打字稿

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

完美的作品，它不是出现错误。

来源

2018-02-19 07:49:27 Kansara

相关问题

 相关问题