<form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
  <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
  <nz-form-item>
    <nz-form-control>
      <nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-user">
        <input nz-input formControlName="userName" placeholder="username">
      </nz-input-group>
      <nz-form-explain *ngIf="userName.dirty && userName.errors">
        {{ 'Please enter user name!' | translate }}
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control>
      <nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-lock">
        <input nz-input type="password" formControlName="password" placeholder="password">
      </nz-input-group>
      <nz-form-explain *ngIf="password.dirty && password.errors">
        {{ 'Please enter password!' | translate }}
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="http.loading" nzBlock>
      {{ 'app.login.login' | translate }}
    </button>
  </nz-form-item>
</form>
