Takumon/mean-blog

<form
  *ngIf="form"
  (ngSubmit)="onSubmit()"
  [formGroup]="form"
  class="form"
  >
  <div class="form__content">
    <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.hasError(userId, 'minlength')">
          {{ messageService.get('minlength',['ユーザID', userId.getError('minlength').requiredLength]) }}
        </mat-error>
        <mat-error *ngIf="messageService.hasError(userId, 'maxlength')">
            {{ messageService.get('maxlength',['ユーザID', userId.getError('maxlength').requiredLength]) }}
          </mat-error>
        <mat-error *ngIf="messageService.hasError(userId, 'pattern')">
          {{ messageService.get('pattern_hankakueisuji',['ユーザ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>

    <ng-container formGroupName="passwordGroup">
      <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.hasError(password, 'pattern')">
            {{ messageService.get('pattern_password') }}
          </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>

      <mat-form-field class="form__input-container" >
        <input
          matInput
          type="password"
          placeholder="確認用パスワード"
          maxlength="30"
          formControlName="confirmPassword"
          >
          <mat-error *ngIf="messageService.hasError(confirmPassword, 'required')">
            {{ messageService.get('required',['確認用パスワード']) }}
          </mat-error>
          <mat-error *ngIf="messageService.hasErrorWithoutDirty(confirmPassword, 'remote')">
            <ng-container *ngFor="let msg of confirmPassword.getError('remote')">
              {{msg}}<br>
            </ng-container>
          </mat-error>
          <mat-error *ngIf="messageService.hasError(confirmPassword, 'passwordMatch')">
            {{ messageService.get('passwordMatch') }}
          </mat-error>
          <mat-error *ngIf="messageService.hasErrorWithoutDirty(passwordGroup, 'remote')">
            <ng-container *ngFor="let msg of passwordGroup.getError('remote')">
              {{msg}}<br>
            </ng-container>
          </mat-error>
      </mat-form-field>
    </ng-container>
  </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-user-plus"></i>  ユーザ登録
    </button>
  </div>
</form>


<div class="form__footer">
  <span class="spacer"></span>
  <button
    mat-button
    type="button"
    id="registe-article-btn"
    (click)="toRegister()"
    >
    <i class="fa fa-fw fa-chevron-circle-left"></i>  ログイン画面に戻る
  </button>
</div>