Takumon/mean-blog

<form
  *ngIf="form"
  (ngSubmit)="onSubmit()"
  [formGroup]="form"
  class="form"
  >
  <div class="form__content">
    <div class="form__content__error-message">
      <div *ngIf="messageService.hasError(form, 'changingPassowrd')">
        {{ messageService.get('changingPassowrd') }}
      </div>
      <div *ngIf="messageService.hasError(form, 'passwordMatch')">
        {{ messageService.get('passwordMatch') }}
      </div>
      <div *ngIf="messageService.hasErrorWithoutDirty(form, 'remote')">
        <ng-container *ngFor="let msg of form.getError('remote')">
          {{msg}}<br>
        </ng-container>
      </div>
    </div>


    <mat-form-field class="form__input-container">
      <input
        matInput
        type="password"
        placeholder="現在のパスワード"
        maxlength="30"
        formControlName="oldPassword"
        >
      <mat-error *ngIf="messageService.hasError(oldPassword, 'required')">
        {{ messageService.get('required',['現在のパスワード']) }}
      </mat-error>
      <mat-error *ngIf="messageService.hasError(oldPassword, 'minlength')">
        {{ messageService.get('minlength',['現在のパスワード' , oldPassword.getError('minlength').requiredLength]) }}
      </mat-error>
      <mat-error *ngIf="messageService.hasError(oldPassword, 'pattern')">
        {{ messageService.get('pattern_password') }}
      </mat-error>
      <mat-error *ngIf="messageService.hasErrorWithoutDirty(oldPassword, 'remote')">
        <ng-container *ngFor="let msg of oldPassword.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="newPassword"
        >
        <mat-error *ngIf="messageService.hasError(newPassword, 'required')">
          {{ messageService.get('required',['新しいパスワード']) }}
        </mat-error>
        <mat-error *ngIf="messageService.hasError(newPassword, 'pattern')">
          {{ messageService.get('pattern_password') }}
        </mat-error>
        <mat-error *ngIf="messageService.hasErrorWithoutDirty(newPassword, 'remote')">
          <ng-container *ngFor="let msg of newPassword.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="newConfirmPassword"
        >
        <mat-error *ngIf="messageService.hasError(newConfirmPassword, 'required')">
          {{ messageService.get('required',['新しいパスワード確認用']) }}
        </mat-error>
        <mat-error *ngIf="messageService.hasErrorWithoutDirty(newConfirmPassword, 'remote')">
          <ng-container *ngFor="let msg of newConfirmPassword.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">
      パスワード変更
    </button>
  </div>
</form>