diff options
Diffstat (limited to 'src/app/vnfs/userlogin-form')
3 files changed, 28 insertions, 8 deletions
diff --git a/src/app/vnfs/userlogin-form/userlogin-form.component.css b/src/app/vnfs/userlogin-form/userlogin-form.component.css index 4df88b5..be43a70 100644 --- a/src/app/vnfs/userlogin-form/userlogin-form.component.css +++ b/src/app/vnfs/userlogin-form/userlogin-form.component.css @@ -17,11 +17,9 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. -ECOMP is a trademark and service mark of AT&T Intellectual Property. ============LICENSE_END============================================ */ -/* .error-msg{ - - color: red -} */
\ No newline at end of file +.error-message { + color: red; +} diff --git a/src/app/vnfs/userlogin-form/userlogin-form.component.html b/src/app/vnfs/userlogin-form/userlogin-form.component.html index af58842..3f18b72 100644 --- a/src/app/vnfs/userlogin-form/userlogin-form.component.html +++ b/src/app/vnfs/userlogin-form/userlogin-form.component.html @@ -17,7 +17,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. -ECOMP is a trademark and service mark of AT&T Intellectual Property. ============LICENSE_END============================================ --> @@ -30,10 +29,12 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property. <form #userForm="ngForm" (ngSubmit)="getData()"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input placeholder="Enter user Id" class="mdl-textfield__input" id="userId" required - [(ngModel)]="userId" name="userId" value="" #user="ngModel"> + [(ngModel)]="userId" name="userId" value="" #user="ngModel" (ngModelChange)="validateUserName()"> + <span class="error-message">{{errorMessage}}</span> </div> + <div class="form-group text-right"> - <button type="submit" [disabled]="!userForm.form.valid" + <button type="submit" [disabled]="invalid" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary"> Submit </button> diff --git a/src/app/vnfs/userlogin-form/userlogin-form.component.ts b/src/app/vnfs/userlogin-form/userlogin-form.component.ts index 188fe81..c62e9bb 100644 --- a/src/app/vnfs/userlogin-form/userlogin-form.component.ts +++ b/src/app/vnfs/userlogin-form/userlogin-form.component.ts @@ -31,6 +31,8 @@ export class userloginFormComponent implements OnInit { userId: string = ''; returnUrl:string + invalid = true; + errorMessage = ''; constructor(private router: Router, private utiltiy: UtilityService, private route: ActivatedRoute ) { @@ -50,4 +52,23 @@ export class userloginFormComponent implements OnInit { this.router.navigateByUrl(this.returnUrl); } + validateUserName(){ + if (!this.userId.trim() || this.userId.length < 1) { + this.errorMessage = ''; + this.invalid = true; + }else if(this.userId.startsWith(' ') || this.userId.endsWith(' ')){ + this.errorMessage = 'Leading and trailing space is not allowed'; + this.invalid = true; + } else if(this.userId.includes(' ')){ + this.errorMessage = 'More than one space is not allowed in username'; + this.invalid = true; + } else if(this.userId.length > 50) { + this.errorMessage = 'Username should be of minimum one character and maximum 50 character'; + this.invalid = true; + }else { + this.invalid = false; + this.errorMessage = ''; + } + } + } |