Takumon/mean-blog

<form
  *ngIf="form"
  (ngSubmit)="onSubmit()"
  [formGroup]="form"
  class="form"
  >

  <div class="form__content">
    <div class="form__content__error-message" *ngIf="messageService.hasErrorWithoutDirty(form, 'remote')">
      <ng-container *ngFor="let msg of form.getError('remote')">
        {{msg}}<br>
      </ng-container>
    </div>
    <mat-form-field class="form__input-container">
      <input
        *ngIf="form"
        matInput
        type="text"
        placeholder="ユーザID"
        maxlength="30"
        formControlName="userId"
        appAutofocus
        >
        <mat-error *ngIf="messageService.hasError(userId, 'required')">
          {{ messageService.get('required',['ユーザID']) }}
        </mat-error>
        <mat-error *ngIf="messageService.hasErrorWithoutDirty(userId, 'remote')">
          <ng-container *ngFor="let msg of userId.getError('remote')">
            {{msg}}<br>
          </ng-container>
        </mat-error>
    </mat-form-field>

    <mat-form-field class="form__input-container">
      <input
        matInput
        type="password"
        placeholder="パスワード"
        maxlength="30"
        formControlName="password"
        >
        <mat-error *ngIf="messageService.hasError(password, 'required')">
          {{ messageService.get('required',['パスワード']) }}
        </mat-error>
        <mat-error *ngIf="messageService.hasErrorWithoutDirty(password, 'remote')">
          <ng-container *ngFor="let msg of password.getError('remote')">
            {{msg}}<br>
          </ng-container>
        </mat-error>
    </mat-form-field>
  </div>

  <div class="form__operation">
    <button
      mat-raised-button
      color="primary"
      type="submit"
      [disabled]="form.invalid"
      id="registe-article-btn"
      >
      <i class="fa fa-fw fa-sign-in"></i>  ログイン
    </button>
  </div>
</form>

<div class="form__footer">
  <span class="spacer"></span>
  <button
    mat-button
    type="button"
    id="registe-article-btn"
    (click)="toLogin()"
    >
    <i class="fa fa-fw fa-user-plus"></i>  ユーザ登録はこちら</button>
</div>