feat: validation of playlist url

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

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)],
+            ],
+        });
+    }
 }