undefined formcontrolname beim rendern von formControlName in angular2

Question

Ich versuche reaktive Formularvalidierung von offiziellen Winkel doc. Ich habe ein Problem beim Rendern meines formControlName. Es gibt nicht einen Fehler von Benutzername definiert ist hier ein Fehler

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

ich den Schritt gefolgt und überprüfte auch plucker in angular2. es hat gut funktioniert, aber in meinem Projekt, es ist mir ein Fehler geben

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

in meinem html i nach doc getan haben

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

I reactieappmodule in meiner App-Modul hinzugefügt haben und auch Formbuilder injizieren.

Answer 1

Sieht aus wie der Fehler mit userAddErrors.username ist.

Verwenden Sie = anstelle von :. Letzteres spezifiziert den Objekttyp und nicht den Wert.

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

Answer 2

aussehen wie müssen Sie verwenden? Bediener

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