Update Contact Validator

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

@@ -78,7 +78,7 @@ export class AdminPendingComponent implements OnInit {
 
   refreshitemDetail() {
     this.listItemDetail = this.listItemDetail
-      .map((country, i) => ({ id: i + 1, ...country }))
+      .map((item, i) => ({ id: i + 1, ...item }))
       .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
   }
 

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

@@ -68,6 +68,7 @@
                                 <label> ชื่อหัวข้อ </label>
                                 <input readonly class=" form-control" placeholder="" type="text"
                                     formControlName="ctHead" />
+                                    
                             </div>
                         </div>
                     </div>
@@ -77,6 +78,7 @@
                                 <label> หน้าต่างที่มี BUG </label>
                                 <input readonly class=" form-control" placeholder="" type="text"
                                     formControlName="ctTab" />
+                                    
                             </div>
                         </div>
                     </div>
@@ -86,6 +88,7 @@
                                 <label> ชื่อผู้แจ้ง </label>
                                 <input readonly class=" form-control" placeholder="" type="text"
                                     formControlName="ctName" />
+                                   
                             </div>
                         </div>
                     </div>
@@ -94,6 +97,7 @@
                             <label for="exampleFormControlSelect1">วันที่แจ้ง</label>
                             <input readonly type="date" class="form-control" [(ngModel)]="modelContact.sDate"
                                 formControlName="sDate" />
+                                
                         </div>
                     </div>
                     <div class=" row">
@@ -137,11 +141,15 @@
                             <label>ชื่อผู้แจ้ง Bug:</label>
                             <input input class=" form-control" placeholder="" type="text" formControlName="ctName"
                                 [(ngModel)]="modelContact.ctName" />
+                                <div style="color: red;" *ngIf="myFormContact.controls.ctName.status=='INVALID'">
+                                    กรุณากรอกชื่อผู้จอง.</div>
                         </div>
                         <div class="col-6 md-1">
                             <label for="typeahead-focus">หัวข้อการแจ้ง Bug:</label>
                             <input input class=" form-control" placeholder="" type="text" formControlName="ctHead"
                                 [(ngModel)]="modelContact.ctHead" />
+                                <div style="color: red;" *ngIf="myFormContact.controls.ctHead.status=='INVALID'">
+                                    กรุณากรอกชื่อผู้จอง.</div>
                         </div>
                     </div>
                     <div class="row">
@@ -152,11 +160,15 @@
                                 (focus)="focus$.next($any($event).target.value)"
                                 (click)="click$.next($any($event).target.value)" #instance="ngbTypeahead"
                                 formControlName="ctTab" />
+                                <div style="color: red;" *ngIf="myFormContact.controls.ctTab.status=='INVALID'">
+                                    กรุณากรอกชื่อผู้จอง.</div>
                         </div>
                         <div class="col-6 mb-1">
                             <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
                             <input type="date" class="form-control" value="" formControlName="sDate"
-                                [(ngModel)]="modelContact.sDate">
+                                [(ngModel)]="modelContact.sDate" >
+                                <div style="color: red;" *ngIf="myFormContact.controls.sDate.status=='INVALID'">
+                                    กรุณากรอกชื่อผู้จอง.</div>
                         </div>
                     </div>
                     <div class=" row">
@@ -172,7 +184,7 @@
                 </form>
                 <div class="card-footer">
                     <div class="d-grid gap-2 d-md-flex justify-content-md-center">
-                        <button class="btn btn-primary btn-sm" [disabled]="" type="submit"
+                        <button class="btn btn-primary btn-sm" [disabled]="myFormContact.invalid" type="submit"
                             (click)="saveContact()">บันทึก</button>
                         <button class="btn btn-primary btn-sm" type="cancel"
                             (click)="model.dismiss('Cross click')">ยกเลิก</button>

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

@@ -35,6 +35,8 @@ export class ContactAdminComponent implements OnInit {
 
   sDate = "";
 
+
+
   @ViewChild('instance', { static: true }) instance: NgbTypeahead;
   focus$ = new Subject<string>();
   click$ = new Subject<string>();
@@ -46,21 +48,14 @@ export class ContactAdminComponent implements OnInit {
     this.collectionSizeListRoom = this.listContact.length;
     this.collectionSize = this.listContact.length
 
-    this.myFormContact = new FormGroup({
-      ctName: new FormControl(''),
-      ctDesc: new FormControl(''),
-      ctTab: new FormControl(''),
-      ctHead: new FormControl(''),
-      sDate: new FormControl(''),
-      ctStatus: new FormControl('')
-    });
+   
 
     this.myFormAddContact = new FormGroup({
-      ctName: new FormControl(''),
+      ctName: new FormControl('', [Validators.required]),
       ctDesc: new FormControl(''),
-      ctTab: new FormControl(''),
-      ctHead: new FormControl(''),
-      sDate: new FormControl(''),
+      ctTab: new FormControl('', [Validators.required]),
+      ctHead: new FormControl('', [Validators.required]),
+      sDate: new FormControl('', [Validators.required]),
       ctStatus: new FormControl('')
     });
   }
@@ -93,11 +88,11 @@ export class ContactAdminComponent implements OnInit {
     this.sDate = sDate[0] + "-" + sDate[1] + "-" + sDate[2]
 
     this.myFormContact = new FormGroup({
-      ctName: new FormControl(this.modelContact.ctName),
+      ctName: new FormControl(this.modelContact.ctName, [Validators.required]),
       ctDesc: new FormControl(this.modelContact.ctDesc),
-      ctTab: new FormControl(this.modelContact.ctTab),
-      ctHead: new FormControl(this.modelContact.ctHead),
-      sDate: new FormControl(this.modelContact.sDate),
+      ctTab: new FormControl(this.modelContact.ctTab, [Validators.required]),
+      ctHead: new FormControl(this.modelContact.ctHead, [Validators.required]),
+      sDate: new FormControl(this.modelContact.sDate, [Validators.required]),
       ctStatus: new FormControl(this.modelContact.ctStatus)
     });
 
@@ -112,6 +107,7 @@ export class ContactAdminComponent implements OnInit {
   saveContact() {
     this.modelContact.sDate = this.modelContact.sDate.split("-")[0] + "/" + this.modelContact.sDate.split("-")[1] + "/" + this.modelContact.sDate.split("-")[2];
     this.modelContact.ctStatus = 0;
+
     this.ContactService.addContact(this.modelContact);
     this.modalService.dismissAll();
     this.ngOnInit();
@@ -132,6 +128,16 @@ export class ContactAdminComponent implements OnInit {
 
   openAdd(addContact) {
     this.modelContact = new Contact;
+
+    this.myFormContact = new FormGroup({
+      ctName: new FormControl(this.modelContact.ctName, [Validators.required]),
+      ctDesc: new FormControl(this.modelContact.ctDesc),
+      ctTab: new FormControl(this.modelContact.ctTab, [Validators.required]),
+      ctHead: new FormControl(this.modelContact.ctHead, [Validators.required]),
+      sDate: new FormControl(this.modelContact.sDate, [Validators.required]),
+      ctStatus: new FormControl(this.modelContact.ctStatus)
+    });
+
     this.modalService.open(addContact, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
       this.closeResult = `Closed with: ${result}`;
     }, (reason) => {