テストデータを追加

src/app/pages/danka-detail/danka-detail.html

                           <button
                             type="button"
                             class="member-chip"
-                            [class.active]="selectedFamily?.id === family.id"
+                            [class.active]="selectedFamily.id === family.id"
                             (click)="selectFamily(family)"
                           >
                             {{ family.name }}
                       </div>
                     </div>
 
+                    <section class="marriage-summary-panel">
+                      <h4>配偶関係</h4>
+
+                      <div class="marriage-summary-block">
+                        <p class="marriage-summary-label">現在の配偶者</p>
+
+                        @if (getCurrentMarriage(selectedFamily); as currentMarriage) {
+                          @if (getMarriagePartner(currentMarriage, selectedFamily); as currentPartner) {
+                            <button
+                              type="button"
+                              class="marriage-person-button"
+                              (click)="selectFamily(currentPartner)"
+                            >
+                              {{ currentPartner.name }}
+                            </button>
+                          } @else {
+                            <p class="marriage-empty-text">未登録</p>
+                          }
+                        } @else {
+                          <p class="marriage-empty-text">未登録</p>
+                        }
+                      </div>
+
+                      <div class="marriage-summary-block">
+                        <p class="marriage-summary-label">過去の配偶者</p>
+
+                        @if (getPastMarriages(selectedFamily).length > 0) {
+                          <div class="marriage-history-list">
+                            @for (relation of getPastMarriages(selectedFamily); track relation.id) {
+                              @if (getMarriagePartner(relation, selectedFamily); as pastPartner) {
+                                <button
+                                  type="button"
+                                  class="marriage-person-button secondary"
+                                  (click)="selectFamily(pastPartner)"
+                                >
+                                  <span>{{ pastPartner.name }}</span>
+                                  <small>{{ getMarriageStatusLabel(relation.status) }}</small>
+                                </button>
+                              }
+                            }
+                          </div>
+                        } @else {
+                          <p class="marriage-empty-text">未登録</p>
+                        }
+                      </div>
+                    </section>
+
                     <div class="selected-person-actions">
                       <a
                         class="selected-person-button"

src/app/pages/danka-detail/danka-detail.scss

   font-weight: 800;
 }
 
+.marriage-summary-panel {
+  margin-top: 18px;
+  padding: 14px 16px;
+  background: #fffaf3;
+  border: 2px solid #d8caba;
+  border-radius: 12px;
+  box-sizing: border-box;
+}
+
+.marriage-summary-panel h4 {
+  margin: 0 0 12px;
+  color: #2f2720;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.marriage-summary-block + .marriage-summary-block {
+  margin-top: 14px;
+}
+
+.marriage-summary-label {
+  margin: 0 0 8px;
+  color: #7b6b5c;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.marriage-history-list {
+  display: grid;
+  gap: 8px;
+}
+
+.marriage-person-button {
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 10px;
+  border: 2px solid #8a6543;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #2f2720;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  box-sizing: border-box;
+}
+
+.marriage-person-button:hover {
+  background: #f6efe6;
+}
+
+.marriage-person-button small {
+  color: #7b6b5c;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.marriage-person-button.secondary {
+  border-color: #d8caba;
+}
+
+.marriage-empty-text {
+  margin: 0;
+  color: #7b6b5c;
+  font-size: 14px;
+  font-weight: 700;
+}
+
 .selected-person-actions {
   display: grid;
   gap: 10px;

src/app/pages/danka-detail/danka-detail.ts

 import { Component } from '@angular/core';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { DankaService } from '../../services/dankaService';
 import { FamilyService } from '../../services/family-service';
 import { KakochoService } from '../../services/kakocho-service';
     private marriageRelationService: MarriageRelationService,
     private route: ActivatedRoute,
   ) {
-    //遷移先からタブ情報を取得
     const tab = this.route.snapshot.queryParams['tab'];
     if (tab === 'family') {
       this.selectedTab = 'family';
     } else if (tab === 'familyTree') {
       this.selectedTab = 'familyTree';
     }
-    //遷移先のIDから該当の世帯と家族基本を取得
+
     const id = this.route.snapshot.params['id'];
     if (id) {
       this.danka = this.dankaService.getDankaById(id);
       this.selectedFamily = this.families[0];
       this.kakocholist = this.kakochoService.getKakochoByDankaId(id);
     }
-    console.log(this.danka);
-    console.log(this.families);
-    console.log(tab);
   }
 
-  //年齢計算の処理
-  getAge(birthDate: string) {
+  getAge(birthDate: string): string {
     if (birthDate === '') {
       return '-';
     }
 
     const birth = new Date(birthDate);
-    const today: Date = new Date();
+    const today = new Date();
     const thisYearBirthday = new Date(today.getFullYear(), birth.getMonth(), birth.getDate());
 
     let age = today.getFullYear() - birth.getFullYear();
     if (thisYearBirthday > today) {
       age--;
     }
+
     return age.toString();
-    console.log(this.kakocholist);
   }
 
-  //回忌計算の処理
   getKaiki(deathDate: string): number {
     return this.currentYear - new Date(deathDate).getFullYear() + 1;
   }
 
-  //家系図の処理
   selectFamily(family: Family): void {
     this.selectedFamily = family;
   }
     if (!id) {
       return undefined;
     }
+
     return this.families.find((family) => family.id === id);
   }
 
         relation.status !== 'current' &&
         (relation.person1Id === family.id || relation.person2Id === family.id),
     );
-
   }
 
   getMarriagePartner(relation: MarriageRelation, family: Family): Family | undefined {

src/app/pages/family-edit/family-edit.html

                 </div>
               </div>
 
+              <div class="form-row">
+                <label for="marriageStatus">配偶者の状態</label>
+                <div class="form-field">
+                  <select id="marriageStatus" formControlName="marriageStatus">
+                    <option value="current">現在の配偶者</option>
+                    <option value="divorced">離婚</option>
+                    <option value="widowed">死別</option>
+                    <option value="unknown">不明</option>
+                  </select>
+
+                  @if (marriageErrorMessages.length > 0) {
+                    <div class="error-message-list">
+                      @for (error of marriageErrorMessages; track error) {
+                        <p class="error-message">{{ error }}</p>
+                      }
+                    </div>
+                  }
+                </div>
+              </div>
+
               <div class="form-row">
                 <label for="note">備考</label>
                 <div class="form-field">

src/app/pages/family-edit/family-edit.ts

 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 import { FamilyService } from '../../services/family-service';
+import { MarriageRelationService } from '../../services/marriage-relation-service';
 import { Danka } from '../../models/danka';
 import { Family } from '../../models/family';
+import { MarriageRelation } from '../../models/marriage-relation';
 
 @Component({
   selector: 'app-family-edit',
   familyId: string | null = null;
   relationMode: string = '';
   baseFamilyId: string = '';
+  marriageErrorMessages: string[] = [];
 
   constructor(
     private familyService: FamilyService,
+    private marriageRelationService: MarriageRelationService,
     private route: ActivatedRoute,
     private router: Router,
   ) {
           spouseId: this.family.spouseId,
           gender: this.family.gender,
         });
+        this.patchMarriageRelationFields(this.family.id);
       }
     }
 
     if (!this.familyId && this.relationMode === 'spouse') {
       this.familyForm.patchValue({
         spouseId: this.baseFamilyId,
+        marriageStatus: 'current',
       });
     }
 
     fatherId: new FormControl(''),
     motherId: new FormControl(''),
     spouseId: new FormControl(''),
+    marriageStatus: new FormControl<MarriageRelation['status']>('current'),
     gender: new FormControl('unknown'),
   });
 
     return this.families.filter((family) => family.id !== this.familyId);
   }
 
+  patchMarriageRelationFields(familyId: string): void {
+    const relations = this.marriageRelationService.getMarriageRelationsByFamilyId(familyId);
+    const relation =
+      relations.find((marriageRelation) => marriageRelation.status === 'current') ?? relations[0];
+
+    if (!relation) {
+      return;
+    }
+
+    this.familyForm.patchValue({
+      spouseId: relation.person1Id === familyId ? relation.person2Id : relation.person1Id,
+      marriageStatus: relation.status,
+    });
+  }
+
+  findMarriageRelation(person1Id: string, person2Id: string): MarriageRelation | undefined {
+    return this.marriageRelationService
+      .getMarriageRelationsByFamilyId(person1Id)
+      .find(
+        (relation) =>
+          (relation.person1Id === person1Id && relation.person2Id === person2Id) ||
+          (relation.person1Id === person2Id && relation.person2Id === person1Id),
+      );
+  }
+
   saveFamily() {
     if (this.familyForm.invalid) {
       return;
     }
 
+    this.marriageErrorMessages = [];
     const familyId = this.familyId ?? Date.now().toString();
     const dankaId = this.dankaId;
     const formValue = this.familyForm.value;
+    const spouseId = formValue.spouseId ?? '';
+    const marriageStatus = formValue.marriageStatus ?? 'current';
+    const currentSpouseId = marriageStatus === 'current' ? spouseId : '';
     const updatedFamily = {
       id: familyId,
       dankaId: dankaId,
       note: formValue.note?.trim() ?? '',
       fatherId: this.familyForm.value.fatherId ?? '',
       motherId: this.familyForm.value.motherId ?? '',
-      spouseId: this.familyForm.value.spouseId ?? '',
+      spouseId: currentSpouseId,
       gender: this.familyForm.value.gender ?? 'unknown',
     };
+
+    if (spouseId) {
+      const existingRelation = this.findMarriageRelation(familyId, spouseId);
+      const errors = this.marriageRelationService.saveMarriageRelation({
+        id: existingRelation?.id ?? Date.now().toString(),
+        dankaId,
+        person1Id: familyId,
+        person2Id: spouseId,
+        status: marriageStatus,
+        startDate: existingRelation?.startDate ?? '',
+        endDate: existingRelation?.endDate ?? '',
+        note: existingRelation?.note ?? '',
+      });
+
+      if (errors.length > 0) {
+        this.marriageErrorMessages = errors;
+        return;
+      }
+    } else {
+      const currentMarriage = this.marriageRelationService.getCurrentMarriageByFamilyId(familyId);
+      if (currentMarriage) {
+        this.marriageRelationService.deleteMarriageRelation(currentMarriage.id);
+      }
+    }
+
     this.familyService.saveFamily(updatedFamily);
     this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });
   }

src/app/services/family-service.ts

       spouseId: '',
       gender: 'male',
     },
+    {
+      id: '9',
+      dankaId: '1',
+      furigana: 'やまだ はなこ',
+      name: '山田 花子',
+      relationship: '長男の前妻',
+      birthDate: '2005-04-02',
+      note: '',
+      fatherId: '',
+      motherId: '',
+      spouseId: '',
+      gender: 'female',
+    },
   ];
 
   //檀家と紐づいている家族情報の取得

src/app/services/marriage-relation-service.ts

     {
       id: '1',
       dankaId: '1',
-      person1Id: '2', // 太郎
-      person2Id: '8', // 花子
+      person1Id: '2',
+      person2Id: '9',
       status: 'divorced',
       startDate: '',
       endDate: '',
     {
       id: '2',
       dankaId: '1',
-      person1Id: '2', // 太郎
-      person2Id: '7', // 美咲
+      person1Id: '2',
+      person2Id: '7',
       status: 'current',
       startDate: '',
       endDate: '',