From da2fe5e6bfdf09b1feaf7aa4db6240f962555870 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sat, 26 Dec 2020 23:26:10 +0100
Subject: [PATCH] feat: validation of playlist url

---
 .../home/url-upload/url-upload.component.html |  6 +++---
 .../home/url-upload/url-upload.component.ts   | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/app/home/url-upload/url-upload.component.html b/src/app/home/url-upload/url-upload.component.html
index 36353a087..8522ec7b6 100644
--- a/src/app/home/url-upload/url-upload.component.html
+++ b/src/app/home/url-upload/url-upload.component.html
@@ -1,15 +1,15 @@
-<form (ngSubmit)="urlAdded.emit(playlistUrl.value)">
+<form (ngSubmit)="urlAdded.emit(form.value.playlistUrl)" [formGroup]="form">
     <mat-form-field class="full-width">
         <input
             type="url"
             matInput
             placeholder="Playlist URL (m3u, m3u8)"
-            #playlistUrl
+            formControlName="playlistUrl"
         />
     </mat-form-field>
     <button
         mat-flat-button
-        [disabled]="!playlistUrl.value"
+        [disabled]="!form.valid"
         color="primary"
         type="submit"
     >
diff --git a/src/app/home/url-upload/url-upload.component.ts b/src/app/home/url-upload/url-upload.component.ts
index e7dc78a56..5b4d69491 100644
--- a/src/app/home/url-upload/url-upload.component.ts
+++ b/src/app/home/url-upload/url-upload.component.ts
@@ -1,4 +1,5 @@
 import { Component, Output, EventEmitter } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({
     selector: 'app-url-upload',
@@ -8,4 +9,22 @@ import { Component, Output, EventEmitter } from '@angular/core';
 export class UrlUploadComponent {
     /** Emits url string to the parent component on form submit */
     @Output() urlAdded: EventEmitter<string> = new EventEmitter();
+
+    /** Form group with playlist url */
+    form: FormGroup;
+
+    /**
+     * Creates an instance of component
+     * @param fb angulars form builder
+     */
+    constructor(private fb: FormBuilder) {
+        const urlRegex = '(https?://.*?.(m3u|m3u8))';
+        this.form = this.fb.group({
+            playlistUrl: [
+                '',
+                // eslint-disable-next-line @typescript-eslint/unbound-method
+                [Validators.required, Validators.pattern(urlRegex)],
+            ],
+        });
+    }
 }