kaimyo-management/src/app/pages/kakocho-edit/kakocho-edit.html

<app-header></app-header>

<div class="breadcrumb">
  @if (kakocho) {
    ホーム &gt; 檀家（世帯） &gt; 過去帳 &gt; 故人を編集
  } @else {
    ホーム &gt; 檀家（世帯） &gt; 過去帳 &gt; 故人を追加
  }
</div>

<div class="danka-edit-page">
  <app-side-menu></app-side-menu>

  <main class="danka-edit-main">
    <section class="edit-panel">

      <div class="page-title-area">
        <h1>
          @if (kakocho) {
            故人を編集
          } @else {
            故人を追加
          }
        </h1>
      </div>

      <form [formGroup]="kakochoForm" class="edit-form">

        <div class="edit-content">

          <section class="basic-edit-section">
            <h2>基本情報</h2>

            <div class="form-list">

              <!-- 名前 -->
              <div class="form-row">
                <label for="name">名前</label>

                <div class="form-field">
                  <input
                    id="name"
                    type="text"
                    formControlName="name"
                  />

                  @if (kakochoForm.get('name')?.invalid && kakochoForm.get('name')?.touched) {
                    <p class="error-message">
                      名前を入力してください。
                    </p>
                  }
                </div>
              </div>

              <!-- ふりがな -->
              <div class="form-row">
                <label for="furigana">ふりがな</label>

                <input
                  id="furigana"
                  type="text"
                  formControlName="furigana"
                />
              </div>

              <!-- 続柄 -->
              <div class="form-row">
                <label for="relationship">続柄</label>

                <input
                  id="relationship"
                  type="text"
                  formControlName="relationship"
                />
              </div>

              <!-- 戒名 -->
              <div class="form-row">
                <label for="kaimyo">戒名</label>

                <input
                  id="kaimyo"
                  type="text"
                  formControlName="kaimyo"
                />
              </div>

              <!-- 没年月日 -->
              <div class="form-row">
                <label for="deathDate">没年月日</label>

                <input
                  id="deathDate"
                  type="date"
                  formControlName="deathDate"
                />
              </div>

              <!-- 行年 -->
              <div class="form-row">
                <label for="ageAtDeath">行年</label>

                <input
                  id="ageAtDeath"
                  type="text"
                  formControlName="ageAtDeath"
                />
              </div>

              <!-- 備考 -->
              <div class="form-row">
                <label for="note">備考</label>

                <textarea
                  id="note"
                  formControlName="note"
                ></textarea>
              </div>

            </div>
          </section>

        </div>

        <div class="bottom-actions">

          @if (kakocho) {
            <button
              type="button"
              class="delete-button"
              (click)="deleteKakocho()"
            >
              削除
            </button>
          }

          <button
            type="button"
            class="cancel-button"
            [routerLink]="['/kakocho-list']"
          >
            キャンセル
          </button>

          <button
            type="button"
            class="save-button"
            [disabled]="kakochoForm.invalid"
            (click)="saveKakocho()"
          >
            保存
          </button>

        </div>

      </form>

    </section>
  </main>
</div>