From 9e8aa10d94e4642ec1d20a522c41b06e9df7758b Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 23 Aug 2016 15:49:16 +0200 Subject: Client: change url validation for friend add --- .../friends/friend-add/friend-add.component.ts | 53 ++++++++++++---------- 1 file changed, 29 insertions(+), 24 deletions(-) (limited to 'client/src/app/admin/friends/friend-add/friend-add.component.ts') diff --git a/client/src/app/admin/friends/friend-add/friend-add.component.ts b/client/src/app/admin/friends/friend-add/friend-add.component.ts index ffc499b92..16cfd8a3a 100644 --- a/client/src/app/admin/friends/friend-add/friend-add.component.ts +++ b/client/src/app/admin/friends/friend-add/friend-add.component.ts @@ -1,20 +1,30 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; import { Router } from '@angular/router'; +import { validateUrl } from '../../../shared'; import { FriendService } from '../shared'; @Component({ selector: 'my-friend-add', template: require('./friend-add.component.html'), - styles: [ require('./friend-add.component.scss') ] + styles: [ require('./friend-add.component.scss') ], + directives: [ REACTIVE_FORM_DIRECTIVES ] }) -export class FriendAddComponent { - urls = [ '' ]; +export class FriendAddComponent implements OnInit { + friendAddForm: FormGroup; + urls = [ ]; error: string = null; constructor(private router: Router, private friendService: FriendService) {} + ngOnInit() { + this.friendAddForm = new FormGroup({}); + this.addField(); + } + addField() { + this.friendAddForm.addControl(`url-${this.urls.length}`, new FormControl('', [ validateUrl ])); this.urls.push(''); } @@ -30,6 +40,21 @@ export class FriendAddComponent { return (index !== 0 || this.urls.length > 1) && index !== (this.urls.length - 1); } + isFormValid() { + // Do not check the last input + for (let i = 0; i < this.urls.length - 1; i++) { + if (!this.friendAddForm.controls[`url-${i}`].valid) return false; + } + + const lastIndex = this.urls.length - 1; + // If the last input (which is not the first) is empty, it's ok + if (this.urls[lastIndex] === '' && lastIndex !== 0) { + return true; + } else { + return this.friendAddForm.controls[`url-${lastIndex}`].valid; + } + } + removeField(index: number) { this.urls.splice(index, 1); } @@ -43,11 +68,6 @@ export class FriendAddComponent { return; } - if (!this.isUrlsRegexValid(notEmptyUrls)) { - this.error = 'Some url(s) are not valid.'; - return; - } - if (!this.isUrlsUnique(notEmptyUrls)) { this.error = 'Urls need to be unique.'; return; @@ -79,21 +99,6 @@ export class FriendAddComponent { return notEmptyUrls; } - // Temporary - // Use HTML validators - private isUrlsRegexValid(urls: string[]) { - let res = true; - - const urlRegex = new RegExp('^https?://(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$'); - urls.forEach((url) => { - if (urlRegex.test(url) === false) { - res = false; - } - }); - - return res; - } - private isUrlsUnique(urls: string[]) { return urls.every(url => urls.indexOf(url) === urls.lastIndexOf(url)); } -- cgit v1.2.3