undefined formcontrolname while rendering formControlName in angular2

I am trying Reactive form validation from official angular doc. I am having a problem while rendering my formControlName. It give an error of username not defined here is an error

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

I followed the step and also checked plucker in angular2. it worked well but in my project, it is giving me an error

         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 my html i have done according to 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>

I have added reactieappmodule in my app module and also inject formbuilder.