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 @@
<div class=" form-group">
<label> ชื่อผู้จอง </label>
<input class=" form-control" placeholder="" type="text"
[(ngModel)]="modelRoomDetail.userName" formControlName="userNameForm" />
<div style="color: red;" *ngIf="myFormRoom.controls.userNameForm.status=='INVALID'">กรุณากรอกชื่อผู้จอง.</div>
formControlName="userNameForm" />
<div style="color: red;" *ngIf="myFormRoom.controls.userNameForm.status=='INVALID'">
กรุณากรอกชื่อผู้จอง.</div>
</div>
</div>
</div>
......@@ -212,9 +213,9 @@
<div class=" col-sm-12 mb-1">
<div class=" form-group">
<label> อีเมล </label>
<input class=" form-control" placeholder="" type="text"
[(ngModel)]="modelRoomDetail.email" formControlName="email" />
<div style="color: red;" *ngIf="myFormRoom.controls.email.status=='INVALID'">กรุณากรอกอีเมล.</div>
<input class=" form-control" placeholder="" type="text" formControlName="email" />
<div style="color: red;" *ngIf="myFormRoom.controls.email.status=='INVALID'">
กรุณากรอกอีเมล.</div>
</div>
</div>
</div>
......@@ -222,26 +223,26 @@
<div class=" col-md-12">
<div class=" form-group">
<label> เบอร์โทร </label>
<input class=" form-control" placeholder="" type="text"
[(ngModel)]="modelRoomDetail.rTelephone" formControlName="rTelephone" />
<div style="color: red;" *ngIf="myFormRoom.controls.rTelephone.status=='INVALID'">กรุณากรอกหมายเลขโทรศัพท์.</div>
<input class=" form-control" placeholder="" type="text" formControlName="rTelephone" />
<div style="color: red;" *ngIf="myFormRoom.controls.rTelephone.status=='INVALID'">
กรุณากรอกหมายเลขโทรศัพท์.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">ชื่อห้อง</label>
<input class="form-control" type="text" [(ngModel)]="modelRoomDetail.room.rName"
formControlName="rName" />
<div style="color: red;" *ngIf="myFormRoom.controls.rName.status=='INVALID'">กรุณากรอกชื่อห้อง.</div>
<input class="form-control" type="text" formControlName="rName" />
<div style="color: red;" *ngIf="myFormRoom.controls.rName.status=='INVALID'">
กรุณากรอกชื่อห้อง.</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">รายละเอียด</label>
<input class="form-control" type="text" [(ngModel)]="modelRoomDetail.room.rDesc"
formControlName="rDesc" />
<div style="color: red;" *ngIf="myFormRoom.controls.rDesc.status=='INVALID'">กรุณากรอกรายละเอียดการจอง.</div>
<input class="form-control" type="text" formControlName="rDesc" />
<div style="color: red;" *ngIf="myFormRoom.controls.rDesc.status=='INVALID'">
กรุณากรอกรายละเอียดการจอง.</div>
</div>
</div>
<div class="row">
......@@ -249,13 +250,15 @@
<label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
<input type="date" class="form-control" [(ngModel)]="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 class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
<input type="date" class="form-control" [(ngModel)]="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 class="row">
......@@ -263,13 +266,15 @@
<label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
<input class="form-control" type="time" [(ngModel)]="thStime"
(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 class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
<input class="form-control" type="time" [(ngModel)]="thEtime"
(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 class=" row">
......@@ -277,8 +282,7 @@
<div class=" form-group">
<label> หมายเหตุ </label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
placeholder="......" [(ngModel)]="modelRoomDetail.Remark"
formControlName="Remark"></textarea>
placeholder="......" formControlName="Remark"></textarea>
</div>
</div>
</div>
......@@ -286,7 +290,7 @@
<div class=" col-md-6 mb-2">
<label> สถานะ </label>
<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="1" style="color: black;">อนุมัติ</option>
<option value="2" style="color: black;">ยกเลิก</option>
......@@ -319,7 +323,8 @@
<label> ชื่อผู้จอง </label>
<input class=" form-control" placeholder="" type="text"
[(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>
......@@ -329,7 +334,8 @@
<label> อีเมล </label>
<input class=" form-control" placeholder="" type="text"
[(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>
......@@ -339,22 +345,27 @@
<label> เบอร์โทร </label>
<input class=" form-control" placeholder="" type="text"
[(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 class="row">
<div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">ชื่ออุปกรณ์</label>
<input class="form-control" type="text" [(ngModel)]="modelItemDetail.equirment.eqName" formControlName="eqName" />
<div style="color: red;" *ngIf="myFormEquir.controls.eqName.status=='INVALID'">กรุณากรอกชื่ออุปกรณ์.</div>
<input class="form-control" type="text" [(ngModel)]="modelItemDetail.equirment.eqName"
formControlName="eqName" />
<div style="color: red;" *ngIf="myFormEquir.controls.eqName.status=='INVALID'">
กรุณากรอกชื่ออุปกรณ์.</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-1">
<label for="exampleFormControlSelect1">รายละเอียดอุปกรณ์</label>
<input class="form-control" type="text" [(ngModel)]="modelItemDetail.equirment.eqDesc" formControlName="eqDesc" />
<div style="color: red;" *ngIf="myFormEquir.controls.eqDesc.status=='INVALID'">กรุณากรอกรายละเอียดการเบิก.</div>
<input class="form-control" type="text" [(ngModel)]="modelItemDetail.equirment.eqDesc"
formControlName="eqDesc" />
<div style="color: red;" *ngIf="myFormEquir.controls.eqDesc.status=='INVALID'">
กรุณากรอกรายละเอียดการเบิก.</div>
</div>
</div>
<div class="row">
......@@ -362,13 +373,15 @@
<label for="exampleFormControlSelect1">วันที่เริ่มต้น</label>
<input type="date" class="form-control" [(ngModel)]="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 class="col-6 mb-1">
<label for="exampleFormControlSelect1">วันที่สิ้นสุด</label>
<input type="date" class="form-control" [(ngModel)]="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 class="row">
......@@ -376,13 +389,15 @@
<label for="exampleFormControlSelect1">เวลาที่เริ่มต้น</label>
<input class="form-control" type="time" [(ngModel)]="thStime"
(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 class="col-6 mb-1">
<label for="exampleFormControlSelect1">เวลาที่สิ้นสุด</label>
<input class="form-control" type="time" [(ngModel)]="thEtime"
(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 class=" row">
......@@ -390,7 +405,8 @@
<label for="changequantity">จำนวน</label>
<input id="changequantity" type="number" class="form-control form-control-sm"
[(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 class=" row">
......@@ -398,7 +414,8 @@
<div class=" form-group">
<label> หมายเหตุ </label>
<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>
......@@ -408,7 +425,7 @@
<label> สถานะ </label>
<br>
<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="1" 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 {
this.sDate = sDate[0] + "-" + sDate[1] + "-" + sDate[2]
let eDate = this.modelItemDetail.eDate.split('/')
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.closeResult = `Closed with: ${result}`;
}, (reason) => {
......@@ -148,6 +164,22 @@ export class AdminPendingComponent implements OnInit {
this.sDate = SDate[0] + "-" + SDate[1] + "-" + SDate[2]
let EDate = this.modelRoomDetail.eDate.split('/')
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.closeResult = `Closed with: ${result}`;
}, (reason) => {
......@@ -239,6 +271,8 @@ export class AdminPendingComponent implements OnInit {
this.ngOnInit();
console.log(this.modelRoomDetail)
}
}
export class NgbdDropdownBasic {
......
src/app/service/room-detail.service.ts
......@@ -80,7 +80,6 @@ export class RoomDetailService {
x.Id == model.Id
)
console.log("temp",temp);
}
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