<form #userForm="ngForm">
  <rb-form-input name="name" label="user name" appValidate="username" required [(ngModel)]="user.name"
                 #nameInput="ngModel">
    <ng-template rbFormValidationMessage="failure">{{nameInput.errors.failure}}</ng-template>
    <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
  </rb-form-input>
  <rb-form-input name="email" label="email" email required [(ngModel)]="user.email" ngModel>
    <ng-template rbFormValidationMessage="email">Invalid email</ng-template>
    <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
  </rb-form-input>
  <rb-form-input name="location" label="location" appValidate="string" required [appValidateArgs]="['alphanum']"
                 [(ngModel)]="user.location" #locationInput="ngModel">
    <ng-template rbFormValidationMessage="failure">{{locationInput.errors.failure}}</ng-template>
    <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
  </rb-form-input>
  <rb-array-input [(ngModel)]="user.devices" name="devices" [pushTemplate]="''">
    <rb-form-input *rbArrayInputItem="let item" rbArrayInputListener="devices" [index]="item.i"
                   label="device" appValidate="string" [name]="'device-' + item.i" [ngModel]="item.value"
                   #deviceInput="ngModel">
      <ng-template rbFormValidationMessage="failure">{{deviceInput.errors.failure}}</ng-template>
    </rb-form-input>
  </rb-array-input>
  <rb-icon-button icon="save" mode="primary" type="submit" [disabled]="!userForm.form.valid" (click)="saveUser()">
    Save change
  </rb-icon-button>
  <span class="message">{{messageUser}}</span>
</form>


<h4 class="pass-heading">Change password</h4>

<form #passForm="ngForm">
  <rb-form-input name="passA" type="password" label="new password" appValidate="password" required
                 [(ngModel)]="password" #passAInput="ngModel">
    <ng-template rbFormValidationMessage="failure">{{passAInput.errors.failure}}</ng-template>
  </rb-form-input>
  <rb-form-input name="passB" type="password" label="confirm password" appValidate="equal"
                 [appValidateArgs]="[password]" required #passBInput="ngModel" ngModel>
    <ng-template rbFormValidationMessage="failure">{{passBInput.errors.failure}}</ng-template>
  </rb-form-input>
  <button class="rb-btn rb-primary" type="submit" [disabled]="!passForm.form.valid" (click)="savePass()">
    Change password
  </button>
  <span class="message">{{messagePass}}</span>
</form>

