|
|
|
|
@@ -1,10 +1,15 @@
|
|
|
|
|
<div class="modal-header" style="background-color: #FBFBFB !important">
|
|
|
|
|
<h4 class="modal-title" style="color: #242222">{{labelModal}}</h4>
|
|
|
|
|
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
|
|
|
|
|
<div class="modal-header" style="background-color: #fbfbfb !important">
|
|
|
|
|
<h4 class="modal-title" style="color: #242222">{{ labelModal }}</h4>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="close"
|
|
|
|
|
aria-label="Close"
|
|
|
|
|
(click)="activeModal.dismiss('Cross click')"
|
|
|
|
|
>
|
|
|
|
|
<span aria-hidden="true">×</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body" style="background-color: #FBFBFB !important">
|
|
|
|
|
<div class="modal-body" style="background-color: #fbfbfb !important">
|
|
|
|
|
<form [formGroup]="myForm">
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<div class="form-group col-md-6">
|
|
|
|
|
@@ -15,9 +20,15 @@
|
|
|
|
|
id="name"
|
|
|
|
|
formControlName="name"
|
|
|
|
|
maxlength="50"
|
|
|
|
|
[ngClass]="{'is-invalid': myForm.get('name').invalid && myForm.get('name').touched}"
|
|
|
|
|
[ngClass]="{
|
|
|
|
|
'is-invalid':
|
|
|
|
|
myForm.get('name').invalid && myForm.get('name').touched
|
|
|
|
|
}"
|
|
|
|
|
/>
|
|
|
|
|
<div *ngIf="myForm.get('name').invalid && myForm.get('name').touched" class="text-danger">
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="myForm.get('name').invalid && myForm.get('name').touched"
|
|
|
|
|
class="text-danger"
|
|
|
|
|
>
|
|
|
|
|
Name is required.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -29,9 +40,15 @@
|
|
|
|
|
id="email"
|
|
|
|
|
formControlName="email"
|
|
|
|
|
maxlength="50"
|
|
|
|
|
[ngClass]="{'is-invalid': myForm.get('email').invalid && myForm.get('email').touched}"
|
|
|
|
|
[ngClass]="{
|
|
|
|
|
'is-invalid':
|
|
|
|
|
myForm.get('email').invalid && myForm.get('email').touched
|
|
|
|
|
}"
|
|
|
|
|
/>
|
|
|
|
|
<div *ngIf="myForm.get('email').invalid && myForm.get('email').touched" class="text-danger">
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="myForm.get('email').invalid && myForm.get('email').touched"
|
|
|
|
|
class="text-danger"
|
|
|
|
|
>
|
|
|
|
|
Please enter a valid email.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -44,9 +61,15 @@
|
|
|
|
|
formControlName="phone"
|
|
|
|
|
pattern="^[0-9]*$"
|
|
|
|
|
maxlength="13"
|
|
|
|
|
[ngClass]="{'is-invalid': myForm.get('phone').invalid && myForm.get('phone').touched}"
|
|
|
|
|
[ngClass]="{
|
|
|
|
|
'is-invalid':
|
|
|
|
|
myForm.get('phone').invalid && myForm.get('phone').touched
|
|
|
|
|
}"
|
|
|
|
|
/>
|
|
|
|
|
<div *ngIf="myForm.get('phone').invalid && myForm.get('phone').touched" class="text-danger">
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="myForm.get('phone').invalid && myForm.get('phone').touched"
|
|
|
|
|
class="text-danger"
|
|
|
|
|
>
|
|
|
|
|
Please enter a valid phone number.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -58,9 +81,15 @@
|
|
|
|
|
id="owner"
|
|
|
|
|
maxlength="30"
|
|
|
|
|
formControlName="owner"
|
|
|
|
|
[ngClass]="{'is-invalid': myForm.get('owner').invalid && myForm.get('owner').touched}"
|
|
|
|
|
[ngClass]="{
|
|
|
|
|
'is-invalid':
|
|
|
|
|
myForm.get('owner').invalid && myForm.get('owner').touched
|
|
|
|
|
}"
|
|
|
|
|
/>
|
|
|
|
|
<div *ngIf="myForm.get('owner').invalid && myForm.get('owner').touched" class="text-danger">
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="myForm.get('owner').invalid && myForm.get('owner').touched"
|
|
|
|
|
class="text-danger"
|
|
|
|
|
>
|
|
|
|
|
Owner is required.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -72,9 +101,15 @@
|
|
|
|
|
id="address"
|
|
|
|
|
formControlName="address"
|
|
|
|
|
maxlength="90"
|
|
|
|
|
[ngClass]="{'is-invalid': myForm.get('address').invalid && myForm.get('address').touched}"
|
|
|
|
|
[ngClass]="{
|
|
|
|
|
'is-invalid':
|
|
|
|
|
myForm.get('address').invalid && myForm.get('address').touched
|
|
|
|
|
}"
|
|
|
|
|
/>
|
|
|
|
|
<div *ngIf="myForm.get('address').invalid && myForm.get('address').touched" class="text-danger">
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="myForm.get('address').invalid && myForm.get('address').touched"
|
|
|
|
|
class="text-danger"
|
|
|
|
|
>
|
|
|
|
|
Address is required.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -86,9 +121,14 @@
|
|
|
|
|
id="kwh"
|
|
|
|
|
formControlName="kwh"
|
|
|
|
|
maxlength="15"
|
|
|
|
|
[ngClass]="{'is-invalid': myForm.get('kwh').invalid && myForm.get('kwh').touched}"
|
|
|
|
|
[ngClass]="{
|
|
|
|
|
'is-invalid': myForm.get('kwh').invalid && myForm.get('kwh').touched
|
|
|
|
|
}"
|
|
|
|
|
/>
|
|
|
|
|
<div *ngIf="myForm.get('kwh').invalid && myForm.get('kwh').touched" class="text-danger">
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="myForm.get('kwh').invalid && myForm.get('kwh').touched"
|
|
|
|
|
class="text-danger"
|
|
|
|
|
>
|
|
|
|
|
Please enter a valid KWH.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -96,29 +136,37 @@
|
|
|
|
|
<label for="statusId" style="color: #242222">Status:</label>
|
|
|
|
|
<select
|
|
|
|
|
id="statusId"
|
|
|
|
|
class="form-control"
|
|
|
|
|
class="form-control custom-select"
|
|
|
|
|
formControlName="statusId"
|
|
|
|
|
[ngClass]="{'is-invalid': myForm.get('statusId').invalid && myForm.get('statusId').touched}"
|
|
|
|
|
[ngClass]="{
|
|
|
|
|
'is-invalid':
|
|
|
|
|
myForm.get('statusId').invalid && myForm.get('statusId').touched
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<option *ngFor="let data of filteredDataStatus" [value]="data.id">
|
|
|
|
|
{{ data.name }}
|
|
|
|
|
</option>
|
|
|
|
|
</select>
|
|
|
|
|
<div *ngIf="myForm.get('statusId').invalid && myForm.get('statusId').touched" class="text-danger">
|
|
|
|
|
<div
|
|
|
|
|
*ngIf="
|
|
|
|
|
myForm.get('statusId').invalid && myForm.get('statusId').touched
|
|
|
|
|
"
|
|
|
|
|
class="text-danger"
|
|
|
|
|
>
|
|
|
|
|
Status is required.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer" style="background-color: #FBFBFB !important">
|
|
|
|
|
<div class="modal-footer" style="background-color: #fbfbfb !important">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-secondary"
|
|
|
|
|
style="
|
|
|
|
|
color: #242222 !important;
|
|
|
|
|
background-color: #FBFBFB !important;
|
|
|
|
|
border-color: #FBFBFB !important;
|
|
|
|
|
background-color: #fbfbfb !important;
|
|
|
|
|
border-color: #fbfbfb !important;
|
|
|
|
|
"
|
|
|
|
|
(click)="activeModal.dismiss('Cross click')"
|
|
|
|
|
>
|
|
|
|
|
@@ -126,7 +174,7 @@
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
style="color: #ffffff !important; background-color: #37A647 !important"
|
|
|
|
|
style="color: #ffffff !important; background-color: #37a647 !important"
|
|
|
|
|
class="btn btn-primary"
|
|
|
|
|
(click)="addRow()"
|
|
|
|
|
>
|
|
|
|
|
|