Improve project name validator when adding new project

Signed-off-by: sshijun <sshijun@vmware.com>
This commit is contained in:
sshijun 2019-09-19 13:47:34 +08:00
parent e505ba53f0
commit 6b2ba60c1e
2 changed files with 17 additions and 12 deletions

View File

@ -3,16 +3,21 @@
<div class="modal-body modal-height">
<inline-alert></inline-alert>
<form #projectForm="ngForm" class="clr-form clr-form-horizontal">
<clr-input-container>
<label class="required">{{'PROJECT.NAME' | translate}}</label>
<input clrInput type="text" id="create_project_name" [(ngModel)]="project.name" name="create_project_name" class="input-width"
<div class="clr-form-control">
<label class="required clr-control-label">{{'PROJECT.NAME' | translate}}</label>
<div class="clr-control-container" [class.clr-error]="!isNameValid">
<div class="clr-input-wrapper">
<input type="text" id="create_project_name" [(ngModel)]="project.name" name="create_project_name" class="clr-input input-width"
required pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" minlength="2" #projectName="ngModel" autocomplete="off"
(keyup)='handleValidation()'>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
</div>
<clr-control-error *ngIf="!isNameValid" class="tooltip-content">
{{ nameTooltipText | translate }}
</clr-control-error>
<span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
</clr-input-container>
</div>
</div>
<clr-checkbox-container>
<label class="form-group-label-override">{{'PROJECT.ACCESS_LEVEL' | translate}}
<clr-tooltip>
@ -41,7 +46,6 @@
<clr-control-error class="tooltip-content">
{{ 'PROJECT.COUNT_QUOTA_TIP' | translate }}
</clr-control-error>
<span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
</clr-input-container>
<div class="clr-form-control" *ngIf="isSystemAdmin">
<label for="create_project_storage_limit" class="required clr-control-label">{{'PROJECT.STORAGE_QUOTA' | translate}}

View File

@ -89,6 +89,7 @@ export class CreateProjectComponent implements OnInit, OnChanges, OnDestroy {
this.isNameValid = cont.valid;
if (this.isNameValid) {
// Check exiting from backend
this.checkOnGoing = true;
this.projectService
.checkProjectExists(cont.value)
.subscribe(() => {