undefined formcontrolname，同時呈現在角度2的formControlName

我想從官方角度doc反應形式驗證。我在渲染我的formControlName時遇到問題。它給這裏沒有定義用戶名的錯誤錯誤undefined formcontrolname，同時呈現在角度2的formControlName

Error: Uncaught (in promise): Error: Error in ./UserAddComponent class UserAddComponent - inline template:8:15 caused by: Cannot read property 'username' of undefined 
Error: Error in ./UserAddComponent class UserAddComponent - inline template:8:15 caused by: Cannot read property 'username' of undefined 
at ViewWrappedError.ZoneAwareError (zone.js:958) 
at ViewWrappedError.BaseError [as constructor] (errors.js:22) 
at ViewWrappedError.WrappedError [as constructor] (errors.js:87) 
at new ViewWrappedError (errors.js:77) 
at CompiledTemplate.proxyViewClass.DebugAppView._rethrowWithContext (view.js:650) 
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:623) 
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410) 
at  CompiledTemplate.proxyViewClass.View_UserAddComponent_Host0.detectChangesInternal (/AppModule/UserAddComponent/host.ngfactory.js:29) 
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425) 
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620) 
at ViewRef_.detectChanges (view_ref.js:170) 
at RouterOutlet.activate (router_outlet.js:156) 
at ActivateRoutes.placeComponentIntoOutlet (router.js:1318) 
at ActivateRoutes.activateRoutes (router.js:1285) 
at router.js:1221 
at resolvePromise (zone.js:643) [angular] 
at resolvePromise (zone.js:619) [angular] 
at :4200/vendor.bundle.js:138417:17 [angular] 
at Object.onInvokeTask (ng_zone.js:264) [angular] 
at ZoneDelegate.invokeTask (zone.js:362) [angular] 
at Zone.runTask (zone.js:166) [<root> => angular] 
at drainMicroTaskQueue (zone.js:529) [<root>] 
at HTMLAnchorElement.ZoneTask.invoke (zone.js:420) [<root>]

我跟着一步，還檢查包機在angular2。它的工作很好，但在我的項目，它給我一個錯誤

  buildForm(): void { 

     this.userAddForm = this.fb.group(
      { 
      username: ['', [Validators.minLength(8), Validators.maxLength(25), Validators.required]], 

      password: ['', [Validators.minLength(8), Validators.maxLength(25), Validators.required]], 
      passwordConfirm: ['', [Validators.minLength(8), Validators.maxLength(25), Validators.required]], 

      userRole: ['', [Validators.required]], 
      locationCode: ['', [Validators.required]] 
      }, 
      { Validators: matchingPasswordsValidators('password', 'confirmPassword') } 

     ); 
     this.active = false; 

     this.userAddForm.valueChanges 
      .subscribe(data => this.onValueChanged(data)); 


     this.onValueChanged(); 
     } 
     onValueChanged(data?: any) { 
     if (!this.userAddForm) { return; } 
     const form = this.userAddForm; 

     for (const field in this.userAddErrors) { 
      // clear previous error message (if any) 
      this.userAddErrors[field] = ''; 
      const control = form.get(field); 

      if (control && control.dirty && !control.valid) { 
      const messages = this.validationMessages[field]; 
      for (const key in control.errors) { 
       this.userAddErrors[field] += messages[key] + ' '; 
      } 
      } 
     } 
     } 
    userAddErrors: { 
     username: "", 
     password: "", 
     passwordConfirm: "", 
     userRole: "", 
     locationCode: "" 
     } 
     validationMessages = { 
     'username': { 
      'required': 'username is required.', 
      'minlength': 'username must be at least 8 characters long.', 
      'maxlength': 'username cannot be more than 24 characters long.' 
     }, 
     'password': { 
      'required': 'password is required.', 
      'minlength': 'password must be at least 8 characters long.', 
      'maxlength': 'password cannot be more than 24 characters long.' 
     }, 
     'passwordConfirm': { 
      'required': 'Confirm Password is required.', 
     }, 
     'userRole': { 
      'required': 'User Role is required.', 
     }, 
     'locationCode': { 
      'required': 'Location is required' 
     } 
     };

在我的HTML我已經根據DOC

<form name="form" class="form-horizontal" method="POST" 
(ngSubmit)="addNewUser()" [formGroup]="userAddForm"> 
<div class="box-body"> 
    <div class="form-group required"> 
    <label class="control-label col-md-4 requiredField"> Username<span class="asteriskField">*</span> </label> 
    <div class="controls col-md-8 "> 
     <input class="input-md textinput textInput form-control" formControlName="username" placeholder="Choose your username" required/> 
     <div *ngIf="userAddErrors.username" class="alert alert-danger"> 
{{ userAddErrors.username }}</div> 
    </div> 
</form>

我在我的應用程序模塊添加reactieappmodule也注入formbuilder完成。

來源

2017-02-22 Bibek Shakya

看起來像錯誤是userAddErrors.username。

使用=而不是:。後者指定對象的類型而不是設置值。

userAddErrors= { 
     username: "", 
     password: "", 
     passwordConfirm: "", 
     userRole: "", 
     locationCode: "" 
     }

來源

2017-02-22 05:13:57

這是我的錯誤，謝謝您的時間，先生 –

沒有問題:)高興它解決 –

看起來你需要使用？運營商

<form name="form" class="form-horizontal" method="POST" 
(ngSubmit)="addNewUser()" [formGroup]="userAddForm"> 
<div class="box-body"> 
    <div class="form-group required"> 
    <label class="control-label col-md-4 requiredField"> Username<span class="asteriskField">*</span> </label> 
    <div class="controls col-md-8 "> 
     <input class="input-md textinput textInput form-control" formControlName="username" placeholder="Choose your username" required/> 
     <div *ngIf="userAddErrors?.username" class="alert alert-danger"> 
{{ userAddErrors?.username }}</div> 
    </div> 
</form>

來源

2017-02-22 05:33:08

undefined formcontrolname，同時呈現在角度2的formControlName

回答

相關問題