Takumon/mean-blog

<form
  [formGroup]="form"
  #f="ngForm"
  class="comment-form reply-form"
  >
  <div class="comment-form__main">
    <img class="comment-form__author-icon"
      lazyLoad="/api/images/avator/{{ auth.loginUser._id }}"
      [offset]="this.Constant.LAZY_LOAD_OFFSET"
      />
    <mat-form-field
      class="comment-form__textarea-wrapper">
      <textarea
        *ngIf="isAuthfocuse"
        matInput
        class="comment-form__textarea"
        formControlName="text"
        placeholder="コメントを{{action}}する"
        appAutofocus
        ></textarea>
      <textarea
        *ngIf="!isAuthfocuse"
        matInput
        class="comment-form__textarea"
        formControlName="text"
        placeholder="コメントを{{action}}する"
        ></textarea>
      <mat-hint align="start">{{text.value?.length || 0}} / 400文字</mat-hint>
      <mat-error *ngIf="messageService.hasError(text, 'required')">
        {{ messageService.get('required',['コメント本文']) }}
      </mat-error>
      <mat-error *ngIf="messageService.hasError(text, 'maxlength')">
        {{ messageService.get('maxNumberOfCharacters',['コメント本文' , text.getError('maxlength').requiredLength]) }} {{text.value?.length || 0}} / 400文字
      </mat-error>
      <mat-error *ngIf="messageService.hasErrorWithoutDirty(text, 'remote')">
        <ng-container *ngFor="let msg of text.getError('remote')">
          {{msg}}<br>
        </ng-container>
      </mat-error>
    </mat-form-field>
  </div>
  <div class="comment-form__operation">
    <div class="comment-form__operation__spacer"></div>
    <button
      *ngIf="hasCancelBtn"
      mat-raised-button
      type="button"
      (click)='onCancel();'><i class="fa fa-fw fa-times"></i>  キャンセル</button>
    <button
      mat-raised-button
      color="primary"
      type="submit"
      [disabled]="!form.valid"
      (click)="upsert(f)"
      ><i class="fa fa-fw fa-commenting"></i>  {{action}}</button>
  </div>
</form>