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));
}
diff --git a/client/src/app/shared/form-validators/index.ts b/client/src/app/shared/form-validators/index.ts
new file mode 100644
index 000000000..f9e9a6191
--- /dev/null
+++ b/client/src/app/shared/form-validators/index.ts
@@ -0,0 +1 @@
+export * from './url.validator';
diff --git a/client/src/app/shared/form-validators/url.validator.ts b/client/src/app/shared/form-validators/url.validator.ts
new file mode 100644
index 000000000..67163b4e9
--- /dev/null
+++ b/client/src/app/shared/form-validators/url.validator.ts
@@ -0,0 +1,11 @@
+import { FormControl } from '@angular/forms';
+
+export function validateUrl(c: FormControl) {
+ let URL_REGEXP = new RegExp('^https?://(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$');
+
+ return URL_REGEXP.test(c.value) ? null : {
+ validateUrl: {
+ valid: false
+ }
+ };
+}
diff --git a/client/src/app/shared/index.ts b/client/src/app/shared/index.ts
index c05e8d253..9edf9b4a0 100644
--- a/client/src/app/shared/index.ts
+++ b/client/src/app/shared/index.ts
@@ -1,3 +1,4 @@
export * from './auth';
+export * from './form-validators';
export * from './search';
export * from './users';
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 87a06b0c6..53e6fd571 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -65,6 +65,8 @@
"src/app/shared/auth/auth-user.model.ts",
"src/app/shared/auth/auth.service.ts",
"src/app/shared/auth/index.ts",
+ "src/app/shared/form-validators/index.ts",
+ "src/app/shared/form-validators/url.validator.ts",
"src/app/shared/index.ts",
"src/app/shared/search/index.ts",
"src/app/shared/search/search-field.type.ts",