Edit code

src/app/models/contact.model.ts

@@ -6,6 +6,7 @@ export class Contact {
     ctHead: string;
     ctStatus: number;
     sDate: string;
+    remark: string;
     constructor(init?: Contact){
         Object.assign(this, init);
         this.id = 1;
@@ -15,5 +16,6 @@ export class Contact {
         this.ctHead = '';
         this.ctStatus = 0;
         this.sDate = '';
+        this.remark = '';
     }
 }
\ No newline at end of file

src/app/pages/contact-admin/contact-admin.component.html

@@ -4,23 +4,23 @@
             <div class="row">
                 <div class="col-6 md-1">
                     <label>ชื่อผู้แจ้ง Bug:</label>
-                    <input input class=" form-control" placeholder="" type="text" [(ngModel)]="modelContact.ctName"/>
+                    <input input class=" form-control" placeholder="" type="text" />
                 </div>
                 <div class="col-6 md-1">
                     <label for="typeahead-focus">หัวข้อการแจ้ง Bug:</label>
-                    <input input class=" form-control" placeholder="" type="text" [(ngModel)]="modelContact.ctHead"/>
+                    <input input class=" form-control" placeholder="" type="text" />
                 </div>
             </div>
             <div class="row">
                 <div class="col-6 md-1">
                     <label for="typeahead-focus">หน้าต่างที่ต้องการแจ้ง Bug:</label>
-                    <input id="typeahead-focus" type="text" class="form-control" [(ngModel)]="modelContact.ctTab"
+                    <input id="typeahead-focus" type="text" class="form-control" [(ngModel)]="model"
                         [ngbTypeahead]="search" (focus)="focus$.next($any($event).target.value)"
                         (click)="click$.next($any($event).target.value)" #instance="ngbTypeahead" />
                 </div>
                 <div class="col-6 mb-1">
                     <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
-                    <input type="date" class="form-control" value="" [(ngModel)]="modelContact.sDate">
+                    <input type="date" class="form-control" value="" >
                 </div>
             </div>
             <div class=" row">
@@ -110,6 +110,7 @@
                                 [(ngModel)]="modelContact.ctHead" />
                             </div>
                         </div>
+                    </div>
                     <div class=" row">
                         <div class=" col-md-12">
                             <div class=" form-group">
@@ -131,9 +132,32 @@
                     <div class="row">
                         <div class="col-sm-12 mb-1">
                             <label for="exampleFormControlSelect1">วันที่แจ้ง</label>
-                            <input readonly type="date" class="form-control" [(ngModel)]="sDate">
+                            <input readonly type="date" class="form-control" [(ngModel)]="modelContact.sDate" />
+                        </div>
+                    </div>
+                    <div class=" row">
+                        <div class=" col-md-12">
+                            <div class=" form-group">
+                                <label> หมายเหตุ </label>
+                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
+                                    placeholder="......" [(ngModel)]="modelContact.Remark"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class=" row">
+                        <div class=" col-md-6 mb-2">
+                            <label> สถานะ </label>
+                            <select class="custom-select form-control" aria-label="Default select example"
+                                formControlName="ctStatus">
+                                <option value="0" selected style="color: black;">รอดำเนินการ</option>
+                                <option value="1" style="color: black;">สำเร็จแล้ว</option>
+                                <option value="2" style="color: black;">ยกเลิก</option>
+                            </select>
                         </div>
                     </div>
+                    <div class=" card-footer">
+                        <button class=" btn btn-fill btn-danger" type="submit" (click)="saveStatusContact()">บันทึก</button>
+                        <button class=" btn btn-fill btn-danger" type="cancel" (click)="modal.dismiss('Cross click')">ยกเลิก</button>
                     </div>
             </div>
         </div>

src/app/pages/contact-admin/contact-admin.component.ts

@@ -79,6 +79,7 @@ export class ContactAdminComponent implements OnInit {
       ctTab: new FormControl(this.modelContact.ctTab, [Validators.required]),
       ctHead: new FormControl(this.modelContact.ctHead, [Validators.required]),
       sDate: new FormControl(this.modelContact.sDate, [Validators.required]),
+      Remark: new FormControl(this.modelContact.remark),
       ctStatus: new FormControl(this.modelContact.ctStatus)
     });
     this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
@@ -97,4 +98,20 @@ export class ContactAdminComponent implements OnInit {
     this.modalService.dismissAll();
     this.ngOnInit();
   }
+
+  saveStatusContact() {
+
+    console.log("this.modelContact", this.modelContact)
+    console.log("form", this.myFromContact)
+    this.modelContact.ctName  = this.myFromContact.value.ctName
+    this.modelContact.ctDesc  = this.myFromContact.value.ctDesc
+    this.modelContact.ctTab  = this.myFromContact.value.ctTab
+    this.modelContact.ctHead = this.myFromContact.value.ctHead
+    this.modelContact.ctStatus  = this.myFromContact.value.ctStatus
+    this.modelContact.sDate  = this.myFromContact.value.sDate
+    console.log("this.modelRoomDetail", this.modelContact)
+    this.ContactService.updateContact(this.modelContact)
+    this.modalService.dismissAll();
+    this.ngOnInit();
+  }
 }

src/app/service/contact.service.ts

@@ -15,6 +15,7 @@ export class ContactService {
             ctTab: 'รายการอุปกรณ์',
             ctHead: 'กดจองไม่ได้',
             ctStatus: 0,
+            remark : 'test',
             sDate: '2021/12/17'
         },
     ]
@@ -22,6 +23,15 @@ export class ContactService {
         this.listContact.push(model);
     }
 
+    updateContact(row_obj: Contact) {
+        this.listContact = this.listContact.filter((value, key) => {
+            if (value.id === row_obj.id) {
+                value = row_obj;
+            }
+            return true;
+        });
+    }
+
     getListContact() {
         return this.listContact;
     }