Client: change url validation for friend add

This commit is contained in:
Chocobozzz 2016-08-23 15:49:16 +02:00
parent b5d6b94c1e
commit 9e8aa10d94
6 changed files with 56 additions and 28 deletions

View File

@ -2,17 +2,25 @@
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<form (ngSubmit)="makeFriends()">
<form (ngSubmit)="makeFriends()" [formGroup]="friendAddForm">
<div class="form-group" *ngFor="let url of urls; let id = index; trackBy:customTrackBy">
<label for="username">Url</label>
<div class="input-group">
<input type="text" class="form-control" [name]="'url-' + id" [id]="'url-' + id" placeholder="http://domain.com" [(ngModel)]="urls[id]" />
<input
type="text" class="form-control" placeholder="http://domain.com"
[name]="'url-' + id" [id]="'url-' + id" [formControlName]="'url-' + id" [(ngModel)]="urls[id]"
/>
<span class="input-group-btn">
<button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
<button *ngIf="displayRemoveField(id)" (click)="removeField(index)" class="btn btn-default" type="button">-</button>
<button *ngIf="displayRemoveField(id)" (click)="removeField(id)" class="btn btn-default" type="button">-</button>
</span>
</div>
<div [hidden]="friendAddForm.controls['url-' + id].valid || friendAddForm.controls['url-' + id].pristine" class="alert alert-warning">
It should be a valid url.
</div>
</div>
<input type="submit" value="Make friends" class="btn btn-default">
<input type="submit" value="Make friends" class="btn btn-default" [disabled]="!isFormValid()">
</form>

View File

@ -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));
}

View File

@ -0,0 +1 @@
export * from './url.validator';

View File

@ -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
}
};
}

View File

@ -1,3 +1,4 @@
export * from './auth';
export * from './form-validators';
export * from './search';
export * from './users';

View File

@ -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",