[add]

檀家編集画面からデータ更新できる

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

           </nav>
         </div>
 
-        <button type="button" class="edit-button">
+        <button type="button" class="edit-button" [routerLink]="['/danka-edit', danka?.id]">
           編集
         </button>
       </div>
 
       <section class="family-summary">
         <div class="family-name-area">
-          <p class="family-name">{{ danka?.householder }}</p>
-          <p class="family-head">世帯主: {{ danka?.householdName }}</p>
+          <p class="family-name">{{ danka?.householdName }}</p>
+          <p class="family-head">世帯主: {{ danka?.householder }}</p>
         </div>
 
         <div class="family-address">

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

 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { DankaService } from '../../services/dankaService';
 import { Danka } from '../../models/danka';
 import { AppHeader } from '../../share/header/app-header';
 
 @Component({
   selector: 'app-danka-detail',
-  imports: [AppHeader, AppSideMenu],
+  imports: [AppHeader, AppSideMenu, RouterLink],
   templateUrl: './danka-detail.html',
   styleUrl: './danka-detail.scss',
 })

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

   ReactiveFormsModule,
   Validators,
 } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 import { DankaService } from '../../services/dankaService';
+import { Danka } from '../../models/danka';
 
 @Component({
   selector: 'app-danka-edit',
   styleUrl: './danka-edit.scss',
 })
 export class DankaEdit {
-  private dankaService = inject(DankaService);
+  danka: Danka | undefined;
 
   dankaForm = new FormGroup({
     householdName: new FormControl('鈴木家'),
     ]),
   });
 
+  constructor(
+    private dankaService: DankaService,
+    private route: ActivatedRoute,
+  ) {
+    const id = this.route.snapshot.params['id'];
+    if (id) {
+      this.danka = this.dankaService.getDankaById(id);
+
+      if (this.danka) {
+        this.dankaForm.patchValue({
+          householdName: this.danka.householdName,
+          householder: this.danka.householder,
+          postalCode: this.danka.postalCode,
+          address: this.danka.address,
+        });
+
+        this.phones.clear();
+
+        for (const phone of this.danka.phones) {
+          this.phones.push(this.createPhoneForm(phone.tel, phone.note));
+        }
+      }
+    }
+    console.log(this.danka);
+  }
+
   get phones() {
     return this.dankaForm.get('phones') as FormArray;
   }
   }
 
   saveDanka() {
+    if (!this.danka) {
+      return;
+    }
+
     const formValue = this.dankaForm.value;
 
     const updatedDanka = {
-      id: '1',
+      id: this.danka.id,
       householdName: formValue.householdName ?? '',
       householder: formValue.householder ?? '',
       postalCode: formValue.postalCode ?? '',