未定義のformcontrolnameをangle2にformControlNameをレンダリング中

Question

私はリアクションフォームの検証を正式な角度docから試しています。私は私のformControlNameをレンダリング中に問題が発生しています。ここは を定義していないユーザ名のエラーを与える私はステップに続き、またangular2でpluckerをチェックし、エラー

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

です。それがうまく働いたが、私のプロジェクトでは、それは私のhtmlで私は私のアプリモジュールでreactieappmoduleを追加してもformbuilderを注入しているドキュメント

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

に応じて行っている私にエラー

  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' 
     } 
     }; 

を与えています。

Answer 1

エラーはuserAddErrors.usernameと思われます。

:の代わりに=を使用してください。後者は、値を設定するのではなく、オブジェクトのタイプを指定します。

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

Answer 2

あなたが使用する必要がありますか？オペレータ

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