<form [formGroup]="rForm">
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-4 col-xs-offset-2 user-header">
          <span>User Data</span>
        </div>
      </div>
      <div class="row form-group">
        <label for="userName" class="user-data-label col-xs-4">Name:</label>
        <div class="col-xs-4">
          <input
            type="text"
            class="form-control"
            formControlName="userName"
            id="userName"
            [(ngModel)]="userName"
            value={{userName}}>
        </div>
        <div class="col-xs-4" *ngIf="!rForm.controls['userName'].valid && rForm.controls['userName'].dirty">{{userNameAlert}}</div>
      </div>
      <div class="row form-group">
        <label for="userSurname" class="user-data-label col-xs-4">Surname:</label>
        <div class="col-xs-4">
          <input
            type="text"
            class="form-control"
            formControlName="userSurname"
            id="userSurname"
            [(ngModel)]="userSurname"
            value={{userSurname}}>
        </div>
        <div class="col-xs-4" *ngIf="!rForm.controls['userSurname'].valid && rForm.controls['userSurname'].dirty">{{userSurnameAlert}}</div>
      </div>
      <div class="row form-group">
        <label for="userAge" class="user-data-label col-xs-4">Age:</label>
        <div class="col-xs-4">
          <input
            type="text"
            class="form-control"
            formControlName="userAge"
            id="userAge"
            [(ngModel)]="userAge"
            value={{userAge}}>
        </div>
        <div class="col-xs-4" *ngIf="!rForm.controls['userAge'].valid && rForm.controls['userAge'].dirty">{{userAgeAlert}}}</div>
      </div>
      <div class="row form-group" *ngIf="userName !== '' && rForm.controls['userName'].valid && userSurname !== '' && rForm.controls['userSurname'].valid">
        <div class="col-xs-8 col-xs-offset-2 hello-bar" >
          <span>Hello {{userName}} {{userSurname}} !</span>
        </div>
      </div>
      <div class="row form-group">
        <button
          class="btn btn-primary col-xs-4 col-xs-offset-4"
          (click)="addUserData()"
          [disabled]="!rForm.valid">Save</button>
      </div>
    </div>
  </div>
</form>