<ngx-loading [show]="loading" [config]="{fullScreenBackdrop: true}"></ngx-loading>
<div class="container ">
  <div class="row">
  <div class="content-block">
    <form #createAnnounceDataForm="ngForm">
      <h2 class="title">新增公佈欄資料</h2>
      <div class="form-group">
          <label for="title">標題</label>
          <span *ngIf="title.invalid && (title.dirty || title.touched)">
            <span class="invalidMessage" *ngIf="title?.errors.required">*此欄必填</span>
          </span>
          <input type="text" class="form-control" id="title" name="title" #title="ngModel" [(ngModel)]="announceData.Title"
            required placeholder="標題">
        </div>
    <div class="form-group">
      <label for="content">摘要</label>
      <span *ngIf="content.invalid && (content.dirty || content.touched)">
        <span class="invalidMessage" *ngIf="content?.errors.required">*此欄必填</span>
      </span>
      <input type="text" class="form-control" id="content" name="content" #content="ngModel" [(ngModel)]="announceData.Content"
        required placeholder="摘要">
    </div>
    <div class="form-group">
        <label for="startOn">公告日期</label>
        <span *ngIf="announceData.StartOn">
          <span class="invalidMessage" *ngIf="!announceData.StartOn">*此欄必填</span>
        </span>
        <div class="form-control">
          <my-date-picker name="startDT" [options]="myDatePickerOptions" [(ngModel)]="this.startDT" required></my-date-picker>
        </div>
      </div>
    <div class="btn-footer">
      <button type="submit" class="btn btn-footer btn-danger" (click)="backPreviousPage()">
        <i class=" fa fa-chevron-left" aria-hidden="true "></i> 回上一頁
      </button>
      <button type="submit" class="btn btn-footer btn-success" [disabled]="!createAnnounceDataForm.form.valid"
        (click)="createAnnounceData()">
        送出
        <i class=" fa fa-chevron-right" aria-hidden="true "></i>
      </button>
    </div>
  </form>
  </div>
  </div>
</div>
