Skip to content

B
BookingMyHrManagement
Commit 217ff232 by DESKTOP-HF0LVOG\myhr
Options

setup myForm หน้า admin

parent 374f8af9
Showing with 86 additions and 36 deletions
src/app/pages/admin-pending/admin-pending.component.html
...@@ -203,8 +203,9 @@ ...@@ -203,8 +203,9 @@
<div class=" form-group"> <div class=" form-group">
<label> ชื่อผู้จอง </label> <label> ชื่อผู้จอง </label>
<input class=" form-control" placeholder="" type="text" <input class=" form-control" placeholder="" type="text"
[(ngModel)]="modelRoomDetail.userName" formControlName="userNameForm" /> formControlName="userNameForm" />
<div style="color: red;" *ngIf="myFormRoom.controls.userNameForm.status=='INVALID'">กรุณากรอกชื่อผู้จอง.</div> <div style="color: red;" *ngIf="myFormRoom.controls.userNameForm.status=='INVALID'">
กรุณากรอกชื่อผู้จอง.</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -212,9 +213,9 @@ ...@@ -212,9 +213,9 @@
<div class=" col-sm-12 mb-1"> <div class=" col-sm-12 mb-1">
<div class=" form-group"> <div class=" form-group">
<label> อีเมล </label> <label> อีเมล </label>
<input class=" form-control" placeholder="" type="text" <input class=" form-control" placeholder="" type="text" formControlName="email" />
[(ngModel)]="modelRoomDetail.email" formControlName="email" /> <div style="color: red;" *ngIf="myFormRoom.controls.email.status=='INVALID'">
<div style="color: red;" *ngIf="myFormRoom.controls.email.status=='INVALID'">กรุณากรอกอีเมล.</div> กรุณากรอกอีเมล.</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -222,26 +223,26 @@ ...@@ -222,26 +223,26 @@
<div class=" col-md-12"> <div class=" col-md-12">
<div class=" form-group"> <div class=" form-group">
<label> เบอร์โทร </label> <label> เบอร์โทร </label>
<input class=" form-control" placeholder="" type="text" <input class=" form-control" placeholder="" type="text" formControlName="rTelephone" />
[(ngModel)]="modelRoomDetail.rTelephone" formControlName="rTelephone" /> <div style="color: red;" *ngIf="myFormRoom.controls.rTelephone.status=='INVALID'">
<div style="color: red;" *ngIf="myFormRoom.controls.rTelephone.status=='INVALID'">กรุณากรอกหมายเลขโทรศัพท์.</div> กรุณากรอกหมายเลขโทรศัพท์.</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 mb-1"> <div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">ชื่อห้อง</label> <label for="exampleFormControlSelect1">ชื่อห้อง</label>
<input class="form-control" type="text" [(ngModel)]="modelRoomDetail.room.rName" <input class="form-control" type="text" formControlName="rName" />
formControlName="rName" /> <div style="color: red;" *ngIf="myFormRoom.controls.rName.status=='INVALID'">
<div style="color: red;" *ngIf="myFormRoom.controls.rName.status=='INVALID'">กรุณากรอกชื่อห้อง.</div> กรุณากรอกชื่อห้อง.</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 mb-1"> <div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">รายละเอียด</label> <label for="exampleFormControlSelect1">รายละเอียด</label>
<input class="form-control" type="text" [(ngModel)]="modelRoomDetail.room.rDesc" <input class="form-control" type="text" formControlName="rDesc" />
formControlName="rDesc" /> <div style="color: red;" *ngIf="myFormRoom.controls.rDesc.status=='INVALID'">
<div style="color: red;" *ngIf="myFormRoom.controls.rDesc.status=='INVALID'">กรุณากรอกรายละเอียดการจอง.</div> กรุณากรอกรายละเอียดการจอง.</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
...@@ -249,13 +250,15 @@ ...@@ -249,13 +250,15 @@
<label for="exampleFormControlSelect1">วันที่เริ่มต้น</label> <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
<input type="date" class="form-control" [(ngModel)]="sDate" <input type="date" class="form-control" [(ngModel)]="sDate"
(ngModelChange)="rDate(sDate,'sdate')" formControlName="sDate" /> (ngModelChange)="rDate(sDate,'sdate')" formControlName="sDate" />
<div style="color: red;" *ngIf="myFormRoom.controls.sDate.status=='INVALID'">กรุณากรอกวันที่เริ่มต้นการจอง.</div> <div style="color: red;" *ngIf="myFormRoom.controls.sDate.status=='INVALID'">
กรุณากรอกวันที่เริ่มต้นการจอง.</div>
</div> </div>
<div class="col-6 mb-1"> <div class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่สิ้นสุด</label> <label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
<input type="date" class="form-control" [(ngModel)]="eDate" <input type="date" class="form-control" [(ngModel)]="eDate"
(ngModelChange)="rDate(eDate,'edate')" formControlName="eDate" /> (ngModelChange)="rDate(eDate,'edate')" formControlName="eDate" />
<div style="color: red;" *ngIf="myFormRoom.controls.eDate.status=='INVALID'">กรุณากรอกวันที่สิ้นสุดการจอง.</div> <div style="color: red;" *ngIf="myFormRoom.controls.eDate.status=='INVALID'">
กรุณากรอกวันที่สิ้นสุดการจอง.</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
...@@ -263,13 +266,15 @@ ...@@ -263,13 +266,15 @@
<label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label> <label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
<input class="form-control" type="time" [(ngModel)]="thStime" <input class="form-control" type="time" [(ngModel)]="thStime"
(ngModelChange)="thtimeChange(thStime,modelRoomDetail.sTime)" formControlName="sTime" /> (ngModelChange)="thtimeChange(thStime,modelRoomDetail.sTime)" formControlName="sTime" />
<div style="color: red;" *ngIf="myFormRoom.controls.sTime.status=='INVALID'">กรุณากรอกเวลาที่เริ่มต้นการจอง.</div> <div style="color: red;" *ngIf="myFormRoom.controls.sTime.status=='INVALID'">
กรุณากรอกเวลาที่เริ่มต้นการจอง.</div>
</div> </div>
<div class="col-6 mb-1"> <div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label> <label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
<input class="form-control" type="time" [(ngModel)]="thEtime" <input class="form-control" type="time" [(ngModel)]="thEtime"
(ngModelChange)="thtimeChange(thEtime,modelRoomDetail.eTime)" formControlName="eTime" /> (ngModelChange)="thtimeChange(thEtime,modelRoomDetail.eTime)" formControlName="eTime" />
<div style="color: red;" *ngIf="myFormRoom.controls.eTime.status=='INVALID'">กรุณากรอกเวลาที่สิ้นสุดการจอง</div> <div style="color: red;" *ngIf="myFormRoom.controls.eTime.status=='INVALID'">
กรุณากรอกเวลาที่สิ้นสุดการจอง</div>
</div> </div>
</div> </div>
<div class=" row"> <div class=" row">
...@@ -277,8 +282,7 @@ ...@@ -277,8 +282,7 @@
<div class=" form-group"> <div class=" form-group">
<label> หมายเหตุ </label> <label> หมายเหตุ </label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
placeholder="......" [(ngModel)]="modelRoomDetail.Remark" placeholder="......" formControlName="Remark"></textarea>
formControlName="Remark"></textarea>
</div> </div>
</div> </div>
</div> </div>
...@@ -286,7 +290,7 @@ ...@@ -286,7 +290,7 @@
<div class=" col-md-6 mb-2"> <div class=" col-md-6 mb-2">
<label> สถานะ </label> <label> สถานะ </label>
<select class="form-select form-control" aria-label="Default select example" <select class="form-select form-control" aria-label="Default select example"
[(ngModel)]="modelRoomDetail.rStatus" formControlName="rStatus"> formControlName="rStatus">
<option value="0" style="color: black;">รอดำเนินการ</option> <option value="0" style="color: black;">รอดำเนินการ</option>
<option value="1" style="color: black;">อนุมัติ</option> <option value="1" style="color: black;">อนุมัติ</option>
<option value="2" style="color: black;">ยกเลิก</option> <option value="2" style="color: black;">ยกเลิก</option>
...@@ -319,7 +323,8 @@ ...@@ -319,7 +323,8 @@
<label> ชื่อผู้จอง </label> <label> ชื่อผู้จอง </label>
<input class=" form-control" placeholder="" type="text" <input class=" form-control" placeholder="" type="text"
[(ngModel)]="modelItemDetail.userName" formControlName="userNameForm" /> [(ngModel)]="modelItemDetail.userName" formControlName="userNameForm" />
<div style="color: red;" *ngIf="myFormEquir.controls.userNameForm.status=='INVALID'">กรุณากรอกชื่อผู้จอง.</div> <div style="color: red;" *ngIf="myFormEquir.controls.userNameForm.status=='INVALID'">
กรุณากรอกชื่อผู้จอง.</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -329,7 +334,8 @@ ...@@ -329,7 +334,8 @@
<label> อีเมล </label> <label> อีเมล </label>
<input class=" form-control" placeholder="" type="text" <input class=" form-control" placeholder="" type="text"
[(ngModel)]="modelItemDetail.email" formControlName="email" /> [(ngModel)]="modelItemDetail.email" formControlName="email" />
<div style="color: red;" *ngIf="myFormEquir.controls.email.status=='INVALID'">กรุณากรอกอีเมล.</div> <div style="color: red;" *ngIf="myFormEquir.controls.email.status=='INVALID'">
กรุณากรอกอีเมล.</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -339,22 +345,27 @@ ...@@ -339,22 +345,27 @@
<label> เบอร์โทร </label> <label> เบอร์โทร </label>
<input class=" form-control" placeholder="" type="text" <input class=" form-control" placeholder="" type="text"
[(ngModel)]="modelItemDetail.eTelephone" formControlName="eTelephone" /> [(ngModel)]="modelItemDetail.eTelephone" formControlName="eTelephone" />
<div style="color: red;" *ngIf="myFormEquir.controls.eTelephone.status=='INVALID'">กรุณากรอกหมายเลขโทรศัพท์</div> <div style="color: red;" *ngIf="myFormEquir.controls.eTelephone.status=='INVALID'">
กรุณากรอกหมายเลขโทรศัพท์</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 mb-1"> <div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">ชื่ออุปกรณ์</label> <label for="exampleFormControlSelect1">ชื่ออุปกรณ์</label>
<input class="form-control" type="text" [(ngModel)]="modelItemDetail.equirment.eqName" formControlName="eqName" /> <input class="form-control" type="text" [(ngModel)]="modelItemDetail.equirment.eqName"
<div style="color: red;" *ngIf="myFormEquir.controls.eqName.status=='INVALID'">กรุณากรอกชื่ออุปกรณ์.</div> formControlName="eqName" />
<div style="color: red;" *ngIf="myFormEquir.controls.eqName.status=='INVALID'">
กรุณากรอกชื่ออุปกรณ์.</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 mb-1"> <div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">รายละเอียดอุปกรณ์</label> <label for="exampleFormControlSelect1">รายละเอียดอุปกรณ์</label>
<input class="form-control" type="text" [(ngModel)]="modelItemDetail.equirment.eqDesc" formControlName="eqDesc" /> <input class="form-control" type="text" [(ngModel)]="modelItemDetail.equirment.eqDesc"
<div style="color: red;" *ngIf="myFormEquir.controls.eqDesc.status=='INVALID'">กรุณากรอกรายละเอียดการเบิก.</div> formControlName="eqDesc" />
<div style="color: red;" *ngIf="myFormEquir.controls.eqDesc.status=='INVALID'">
กรุณากรอกรายละเอียดการเบิก.</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
...@@ -362,13 +373,15 @@ ...@@ -362,13 +373,15 @@
<label for="exampleFormControlSelect1">วันที่เริ่มต้น</label> <label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
<input type="date" class="form-control" [(ngModel)]="sDate" <input type="date" class="form-control" [(ngModel)]="sDate"
(ngModelChange)="rDate(sDate,'sdate')" formControlName="sDate" /> (ngModelChange)="rDate(sDate,'sdate')" formControlName="sDate" />
<div style="color: red;" *ngIf="myFormEquir.controls.sDate.status=='INVALID'">กรุณากรอกวันที่เริ่มต้นการเบิก</div> <div style="color: red;" *ngIf="myFormEquir.controls.sDate.status=='INVALID'">
กรุณากรอกวันที่เริ่มต้นการเบิก</div>
</div> </div>
<div class="col-6 mb-1"> <div class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่สิ้นสุด</label> <label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
<input type="date" class="form-control" [(ngModel)]="eDate" <input type="date" class="form-control" [(ngModel)]="eDate"
(ngModelChange)="rDate(eDate,'edate')" formControlName="eDate" /> (ngModelChange)="rDate(eDate,'edate')" formControlName="eDate" />
<div style="color: red;" *ngIf="myFormEquir.controls.eDate.status=='INVALID'">กรุณากรอกวันที่สิ้นสุดการเบิก.</div> <div style="color: red;" *ngIf="myFormEquir.controls.eDate.status=='INVALID'">
กรุณากรอกวันที่สิ้นสุดการเบิก.</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
...@@ -376,13 +389,15 @@ ...@@ -376,13 +389,15 @@
<label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label> <label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
<input class="form-control" type="time" [(ngModel)]="thStime" <input class="form-control" type="time" [(ngModel)]="thStime"
(ngModelChange)="thtimeChange(thStime,modelItemDetail.sTime)" formControlName="sTime" /> (ngModelChange)="thtimeChange(thStime,modelItemDetail.sTime)" formControlName="sTime" />
<div style="color: red;" *ngIf="myFormEquir.controls.sTime.status=='INVALID'">กรุณากรอกเวลาที่เริ่มต้นการเบิก</div> <div style="color: red;" *ngIf="myFormEquir.controls.sTime.status=='INVALID'">
กรุณากรอกเวลาที่เริ่มต้นการเบิก</div>
</div> </div>
<div class="col-6 mb-1"> <div class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label> <label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
<input class="form-control" type="time" [(ngModel)]="thEtime" <input class="form-control" type="time" [(ngModel)]="thEtime"
(ngModelChange)="thtimeChange(thStime,modelItemDetail.eTime)" formControlName="eTime" /> (ngModelChange)="thtimeChange(thStime,modelItemDetail.eTime)" formControlName="eTime" />
<div style="color: red;" *ngIf="myFormEquir.controls.eTime.status=='INVALID'">กรุณากรอกเวลาที่สิ้นสุดการเบิก</div> <div style="color: red;" *ngIf="myFormEquir.controls.eTime.status=='INVALID'">
กรุณากรอกเวลาที่สิ้นสุดการเบิก</div>
</div> </div>
</div> </div>
<div class=" row"> <div class=" row">
...@@ -390,7 +405,8 @@ ...@@ -390,7 +405,8 @@
<label for="changequantity">จำนวน</label> <label for="changequantity">จำนวน</label>
<input id="changequantity" type="number" class="form-control form-control-sm" <input id="changequantity" type="number" class="form-control form-control-sm"
[(ngModel)]="modelItemDetail.Quantity" formControlName="Quantity" /> [(ngModel)]="modelItemDetail.Quantity" formControlName="Quantity" />
<div style="color: red;" *ngIf="myFormEquir.controls.Quantity.status=='INVALID'">กรุณากรอกจำนวนการเบิก.</div> <div style="color: red;" *ngIf="myFormEquir.controls.Quantity.status=='INVALID'">
กรุณากรอกจำนวนการเบิก.</div>
</div> </div>
</div> </div>
<div class=" row"> <div class=" row">
...@@ -398,7 +414,8 @@ ...@@ -398,7 +414,8 @@
<div class=" form-group"> <div class=" form-group">
<label> หมายเหตุ </label> <label> หมายเหตุ </label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
placeholder="......" [(ngModel)]="modelItemDetail.Remark" formControlName="Remark"></textarea> placeholder="......" [(ngModel)]="modelItemDetail.Remark"
formControlName="Remark"></textarea>
</div> </div>
</div> </div>
</div> </div>
...@@ -408,7 +425,7 @@ ...@@ -408,7 +425,7 @@
<label> สถานะ </label> <label> สถานะ </label>
<br> <br>
<select class="form-select form-control" aria-label="Default select example" <select class="form-select form-control" aria-label="Default select example"
[(ngModel)]="modelItemDetail.eStatus" formControlName="eStatus"> formControlName="eStatus">
<option value="0" style="color: black;">รอดำเนินการ</option> <option value="0" style="color: black;">รอดำเนินการ</option>
<option value="1" style="color: black;">อนุมัติ</option> <option value="1" style="color: black;">อนุมัติ</option>
<option value="2" style="color: black;">ยกเลิก</option> <option value="2" style="color: black;">ยกเลิก</option>
......
src/app/pages/admin-pending/admin-pending.component.ts
...@@ -121,6 +121,22 @@ export class AdminPendingComponent implements OnInit { ...@@ -121,6 +121,22 @@ export class AdminPendingComponent implements OnInit {
this.sDate = sDate[0] + "-" + sDate[1] + "-" + sDate[2] this.sDate = sDate[0] + "-" + sDate[1] + "-" + sDate[2]
let eDate = this.modelItemDetail.eDate.split('/') let eDate = this.modelItemDetail.eDate.split('/')
this.eDate = eDate[0] + "-" + eDate[1] + "-" + eDate[2] this.eDate = eDate[0] + "-" + eDate[1] + "-" + eDate[2]
this.myFormEquir = new FormGroup({
userNameForm: new FormControl(this.modelItemDetail.userName, [Validators.required]),
eTelephone: new FormControl(this.modelItemDetail.eTelephone, [Validators.required]),
email: new FormControl(this.modelItemDetail.email, [Validators.required, Validators.email]),
eqName: new FormControl(this.modelItemDetail.equirment.eqName, [Validators.required]),
eqDesc: new FormControl(this.modelItemDetail.equirment.eqDesc, [Validators.required]),
eqType: new FormControl(this.modelItemDetail.equirment.eqType, [Validators.required]),
sDate: new FormControl(this.modelItemDetail.sDate, [Validators.required]),
eDate: new FormControl(this.modelItemDetail.eDate, [Validators.required]),
sTime: new FormControl(this.modelItemDetail.sTime, [Validators.required]),
eTime: new FormControl(this.modelItemDetail.eTime, [Validators.required]),
Quantity: new FormControl(this.modelItemDetail.Quantity, [Validators.required]),
Remark: new FormControl(this.modelItemDetail.Remark),
eStatus: new FormControl(this.modelItemDetail.eStatus)
})
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => { this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`; this.closeResult = `Closed with: ${result}`;
}, (reason) => { }, (reason) => {
...@@ -148,6 +164,22 @@ export class AdminPendingComponent implements OnInit { ...@@ -148,6 +164,22 @@ export class AdminPendingComponent implements OnInit {
this.sDate = SDate[0] + "-" + SDate[1] + "-" + SDate[2] this.sDate = SDate[0] + "-" + SDate[1] + "-" + SDate[2]
let EDate = this.modelRoomDetail.eDate.split('/') let EDate = this.modelRoomDetail.eDate.split('/')
this.eDate = EDate[0] + "-" + EDate[1] + "-" + EDate[2] this.eDate = EDate[0] + "-" + EDate[1] + "-" + EDate[2]
this.myFormRoom = new FormGroup({
userNameForm: new FormControl(this.modelRoomDetail.userName, [Validators.required]),
rTelephone: new FormControl(this.modelRoomDetail.rTelephone, [Validators.required]),
email: new FormControl(this.modelRoomDetail.email, [Validators.required, Validators.email]),
rName: new FormControl(this.modelRoomDetail.room.rName, [Validators.required]),
rDesc: new FormControl(this.modelRoomDetail.room.rDesc, [Validators.required]),
rType: new FormControl(this.modelRoomDetail.room.rType, [Validators.required]),
sDate: new FormControl(this.modelRoomDetail.sDate, [Validators.required]),
eDate: new FormControl(this.modelRoomDetail.sTime, [Validators.required]),
sTime: new FormControl(this.modelRoomDetail.eDate, [Validators.required]),
eTime: new FormControl(this.modelRoomDetail.eTime, [Validators.required]),
Remark: new FormControl(this.modelRoomDetail.Remark),
rStatus: new FormControl(this.modelRoomDetail.rStatus)
});
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => { this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`; this.closeResult = `Closed with: ${result}`;
}, (reason) => { }, (reason) => {
...@@ -239,6 +271,8 @@ export class AdminPendingComponent implements OnInit { ...@@ -239,6 +271,8 @@ export class AdminPendingComponent implements OnInit {
this.ngOnInit(); this.ngOnInit();
console.log(this.modelRoomDetail) console.log(this.modelRoomDetail)
} }
} }
export class NgbdDropdownBasic { export class NgbdDropdownBasic {
......
src/app/service/room-detail.service.ts
...@@ -80,7 +80,6 @@ export class RoomDetailService { ...@@ -80,7 +80,6 @@ export class RoomDetailService {
x.Id == model.Id x.Id == model.Id
) )
console.log("temp",temp); console.log("temp",temp);
} }
getListRoomDetail() { getListRoomDetail() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment