[update]

世帯名、世帯主、住所、電話番号の値を検証する処理

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

@@ -21,29 +21,44 @@
             <div class="form-list">
               <div class="form-row">
                 <label for="householdName">世帯名</label>
-                <input
-                  id="householdName"
-                  type="text"
-                  formControlName="householdName"
-                />
+                <div class="form-field">
+                  <input
+                    id="householdName"
+                    type="text"
+                    formControlName="householdName"
+                  />
+                  @if (dankaForm.get('householdName')?.invalid && dankaForm.get('householdName')?.touched) {
+                    <p class="error-message">世帯名を入力してください。</p>
+                  }
+                </div>
               </div>
 
               <div class="form-row">
                 <label for="householder">世帯主</label>
-                <input
-                  id="householder"
-                  type="text"
-                  formControlName="householder"
-                />
+                <div class="form-field">
+                  <input
+                    id="householder"
+                    type="text"
+                    formControlName="householder"
+                  />
+                  @if (dankaForm.get('householder')?.invalid && dankaForm.get('householder')?.touched) {
+                    <p class="error-message">世帯主を入力してください。</p>
+                  }
+                </div>
               </div>
 
               <div class="form-row">
                 <label for="postalCode">郵便番号</label>
-                <input
-                  id="postalCode"
-                  type="text"
-                  formControlName="postalCode"
-                />
+                <div class="form-field">
+                  <input
+                    id="postalCode"
+                    type="text"
+                    formControlName="postalCode"
+                  />
+                  @if (dankaForm.get('postalCode')?.invalid && dankaForm.get('postalCode')?.touched) {
+                    <p class="error-message">郵便番号を入力してください。</p>
+                  }
+                </div>
               </div>
 
               <div class="form-row">
@@ -73,32 +88,26 @@
               @for (phone of phones.controls; track $index; let i = $index) {
                 <div class="phone-table-row" [formGroupName]="i">
                   <div>
-                    <input
-                      type="text"
-                      formControlName="tel"
-                      placeholder="電話番号"
-                    />
+                    <input type="text" formControlName="tel" placeholder="電話番号"/>
+                    @if (phone.get('tel')?.invalid && phone.get('tel')?.touched) {
+                      <p class="phone-error-message">
+                        電話番号は数字とハイフンで入力してください。
+                      </p>
+                    }
                   </div>
 
                   <div>
-                    <input
-                      type="text"
-                      formControlName="note"
-                      placeholder="備考"
-                    />
+                    <input type="text" formControlName="note" placeholder="備考"/>
                   </div>
 
                   <div class="phone-row-action">
-                    <button
-                      type="button"
-                      class="remove-phone-button"
-                      (click)="removePhone(i)"
-                    >
+                    <button type="button" class="remove-phone-button" [disabled]="phones.length === 1" (click)="removePhone(i)">
                       削除
                     </button>
                   </div>
                 </div>
               }
+
             </div>
 
             <div class="phone-action">
@@ -125,6 +134,7 @@
           <button
             type="button"
             class="save-button"
+            [disabled]="dankaForm.invalid"
             (click)="saveDanka()"
           >
             保存

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

@@ -95,6 +95,12 @@
   margin-top: 14px;
 }
 
+.form-field {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 .form-row {
   display: grid;
   grid-template-columns: 120px 1fr;
@@ -311,3 +317,39 @@
   font-size: 14px;
   box-sizing: border-box;
 }
+
+.error-message {
+  margin: 6px 0 0;
+  color: #b33a2f;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.4;
+  white-space: normal;
+}
+
+.save-button:disabled {
+  background: #c8b8a5;
+  border-color: #c8b8a5;
+  color: #ffffff;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.phone-field {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.phone-error-message {
+  margin: 4px 0 0;
+  color: #b33a2f;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.remove-phone-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

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

@@ -23,15 +23,11 @@ export class DankaEdit {
   danka: Danka | undefined;
 
   dankaForm = new FormGroup({
-    householdName: new FormControl(''),
-    householder: new FormControl(''),
-    postalCode: new FormControl(''),
+    householdName: new FormControl('', [Validators.required]),
+    householder: new FormControl('', [Validators.required]),
+    postalCode: new FormControl('', Validators.pattern(/^\d{3}-\d{4}$/)),
     address: new FormControl(''),
-    phones: new FormArray([
-      this.createPhoneForm('', ''),
-      this.createPhoneForm('', ''),
-      this.createPhoneForm('', ''),
-    ]),
+    phones: new FormArray([this.createPhoneForm('', '')]),
   });
 
   constructor(
@@ -65,9 +61,9 @@ export class DankaEdit {
     return this.dankaForm.get('phones') as FormArray;
   }
 
-  createPhoneForm(string = '', note = '') {
+  createPhoneForm(tel = '', note = '') {
     return new FormGroup({
-      tel: new FormControl(string),
+      tel: new FormControl(tel, [Validators.pattern(/^[0-9-]+$/)]),
       note: new FormControl(note),
     });
   }
@@ -77,25 +73,32 @@ export class DankaEdit {
   }
 
   removePhone(index: number) {
-    this.phones.removeAt(index);
+    if(this.phones.length > 1) {
+      this.phones.removeAt(index);
+    }
   }
 
   //保存の処理
   saveDanka() {
+    if (this.dankaForm.invalid) {
+      this.dankaForm.markAllAsTouched();
+      return;
+    }
     const formValue = this.dankaForm.value;
     const isEdit = !!this.danka;
     const dankaId = isEdit ? this.danka!.id : Date.now().toString();
-
     const updatedDanka = {
       id: dankaId,
-      householdName: formValue.householdName ?? '',
-      householder: formValue.householder ?? '',
-      postalCode: formValue.postalCode ?? '',
-      address: formValue.address ?? '',
-      phones: (formValue.phones ?? []).map((phone) => ({
-        tel: phone.tel ?? '',
-        note: phone.note ?? '',
-      })),
+      householdName: formValue.householdName?.trim() ?? '',
+      householder: formValue.householder?.trim() ?? '',
+      postalCode: formValue.postalCode?.trim() ?? '',
+      address: formValue.address?.trim() ?? '',
+      phones: (formValue.phones ?? [])
+        .map((phone) => ({
+          tel: phone.tel?.trim() ?? '',
+          note: phone.note?.trim() ?? '',
+        }))
+        .filter((phone) => phone.tel !== '' || phone.note !== ''),
     };
 
     this.dankaService.saveDanka(updatedDanka);
@@ -105,7 +108,6 @@ export class DankaEdit {
     } else {
       this.router.navigateByUrl('/danka-list');
     }
-
   }
 
   //削除の処理

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

@@ -44,7 +44,7 @@ export class DankaList {
 
   //検索処理
   searchDanka() {
-    this.selectedFilter = 'search';
+        this.selectedFilter = 'search';
     //検索欄に入力された値から余白を削除
     const keyword = this.searchKeyword.trim();
     //検索欄が空の場合は檀家の一覧を表示
@@ -52,6 +52,7 @@ export class DankaList {
       this.filterDankaList = this.dankaList;
       return;
     }
+
     //検索欄に値がある場合は値に該当する内容を表示
     this.filterDankaList = this.dankaList.filter((danka) => {
       return (

src/app/services/dankaService.ts

@@ -14,11 +14,11 @@ export class DankaService {
       address: '市内 1-2-3',
       phones: [
         {
-          tel: '03-xxxx-xxxx',
+          tel: '03-4567-8910',
           note: '寺報連絡',
         },
         {
-          tel: '090-xxxx-xxxx',
+          tel: '090-1234-5678',
           note: '世帯主',
         },
       ],
@@ -31,11 +31,11 @@ export class DankaService {
       address: '市内 1-2-3',
       phones: [
         {
-          tel: '03-xxxx-xxxx',
+          tel: '0-5678-9101',
           note: '寺報連絡',
         },
         {
-          tel: '090-xxxx-xxxx',
+          tel: '080-7890-4567',
           note: '世帯主',
         },
       ],