diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order')
3 files changed, 75 insertions, 6 deletions
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html index 0ad676a0..7b31b077 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html @@ -3,14 +3,14 @@ (nzOnOk)="handleOk()" nzWidth="900px"> <div class="subnet_params_container"> - <form nz-form> - <nz-form-item *ngFor="let item of comunicationFormItems"> + <form nz-form > + <nz-form-item *ngFor="let item of comunicationFormItems; let i = index"> <nz-form-label [nzSpan]="6" nzRequired [nzFor]="item.key"> {{ item.title }} </nz-form-label> <nz-form-control [nzSpan]="15"> - <input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="slicing_order_info[item.key]" - *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' "/> + <input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="slicing_order_info[item.key]" [ngClass]="{'error-input-border':validateRules[i] === true}" + *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' " (blur)="validator(item.key,slicing_order_info[item.key],i)"/> <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]" *ngIf="item.title === 'Resource Sharing Level'"> <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options"> @@ -22,6 +22,7 @@ <nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options"> </nz-option> </nz-select> + <nz-form-explain *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' && validateRules[i]" class="validateRules">{{rulesText[i]}}</nz-form-explain> </nz-form-control> <div *ngIf="item.key === 'coverageArea'"> <div *ngFor="let area of areaList; let i = index"> diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less index 3871a5fa..2840bbed 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less @@ -16,4 +16,10 @@ } .ant-form-item-label { text-align: left; +} +.validateRules{ + color: red; +} +.error-input-border{ + border-color: red!important; }
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts index f31f4dd1..7fc95e41 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts @@ -2,7 +2,6 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {COMMUNICATION_FORM_ITEMS, COMMUNICATION_FORM_ADDRESS} from "../../../../../../constants/constants"; import {SlicingTaskServices} from "../../../../../core/services/slicingTaskServices"; import {NzMessageService} from "ng-zorro-antd"; - @Component({ selector: 'app-business-order', templateUrl: './business-order.component.html', @@ -31,12 +30,14 @@ export class BusinessOrderComponent implements OnInit { latency: null, expDataRateUL: null, resourceSharingLevel: "shared", - uEMobilityLevel: null, + uEMobilityLevel: "stationary", useInterval: null, coverageArea: '' }; areaList: any[] = []; isSpinning: boolean = false; + validateRules: any[] = []; + rulesText: any[] = []; AreaFormatting() { let areaList = ['Beijing;Beijing;Haidian District;Wanshoulu Street']; this.areaList = areaList.map((item: any) => { @@ -148,7 +149,68 @@ export class BusinessOrderComponent implements OnInit { this.cancel.emit(this.showModel) } + getRulesText = (words,title,val,index) => { + return this.rulesText[index] = words + title + }; + + validator(key,val,i){ + if(val === null || val.replace(/\s*/g,'').length<=0){ + this.validateRules[i] = true; + this.getRulesText('Please enter',key,val,i); + return false + }else { + this.validateRules[i] = false; + }if(key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && isNaN(val)){ + this.validateRules[i] = true; + this.getRulesText('Only numbers can be entered','','',i); + return false + }else if(key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && !isNaN(val)){ + console.log("-----maxNumberofUEs") + this.validateRules[i] = true; + this.getRulesText('Scope: 1-100000','','',i); + return false + }else { + this.validateRules[i] = false; + }if((key === 'expDataRateDL' || key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && isNaN(val)){ + this.validateRules[i] = true; + this.getRulesText('Only numbers can be entered','','',i); + return false + }else if((key === 'expDataRateDL' || key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && !isNaN(val)){ + this.validateRules[i] = true; + this.getRulesText('Scope: 100-3000','','',i); + return false + }else { + this.validateRules[i] = false; + }if(key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && isNaN(val)){ + this.validateRules[i] = true; + this.getRulesText('Only numbers can be entered','','',i); + return false + }else if(key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && !isNaN(val)){ + this.validateRules[i] = true; + this.getRulesText('Scope: 10-200','','',i); + return false + }else { + this.validateRules[i] = false; + }if(key === 'useInterval' && !/^[1-9]\d*$/.test(val) && isNaN(val)){ + this.validateRules[i] = true; + this.getRulesText('Only numbers can be entered','','',i); + return false + }else if(key === 'useInterval' && !/^[1-9]\d*$/.test(val) && !isNaN(val)){ + this.validateRules[i] = true; + this.getRulesText('Scope: >=1','','',i); + return false + }else { + this.validateRules[i] = false; + } + } + handleOk(): void { + Object.keys(this.slicing_order_info).forEach((item,index)=>{ + this.validator(item,this.slicing_order_info[item],index) + }); + if(this.validateRules.indexOf(true)>-1){ + return + }; const coverage_list: string[] = []; this.areaList.forEach( item => { let str: string = ''; |