new song GUI

WEB/src/app/data/edit-song.service.ts

@@ -1,7 +1,8 @@
 import { SongsService } from 'src/app/data/songs.service';
 import { Injectable } from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
-import { switchMap, tap } from 'rxjs/operators';
+import { switchMap } from 'rxjs/operators';
+import { Song } from '../models/song.model';
 
 @Injectable({
   providedIn: 'root'
@@ -10,7 +11,7 @@ export class EditSongService {
   constructor(private songsService: SongsService) {}
 
   public initEditForm(attachSync: boolean): FormGroup {
-    const song = this.songsService.selectedSong.value;
+    const song = attachSync ? this.songsService.selectedSong.value : this.defaultValues();
     const form = new FormGroup({
       Number: new FormControl(song.Number, {
         updateOn: 'blur',
@@ -25,7 +26,10 @@ export class EditSongService {
         updateOn: 'blur',
         validators: Validators.required
       }),
-      Key: new FormControl(song.Key, { updateOn: 'blur' }),
+      Key: new FormControl(song.Key, {
+        updateOn: 'blur',
+        validators: Validators.required
+      }),
       Tempo: new FormControl(song.Tempo, { updateOn: 'blur' }),
       Comments: new FormControl(song.Comments, { updateOn: 'blur' }),
     });
@@ -35,10 +39,33 @@ export class EditSongService {
     return form;
   }
 
-    private attachSync(form: FormGroup, song: import("/Users/benjamin/src/wgenerator/WEB/src/app/models/song.model").Song) {
+    private attachSync(form: FormGroup, song: Song) {
         const controls = Object.keys(form.controls);
         controls.forEach(control => {
             form.controls[control].valueChanges.pipe(switchMap(value => this.songsService.patch(song.ID, control, value))).subscribe();
         });
     }
+
+    private defaultValues(): Song {
+      const song: Song = {
+        ID: null,
+        Number: this.firstFreeNumber(),
+        Name: null,
+        Tempo: null,
+        Text: null,
+        SongType: null,
+        Key: null,
+        Comments: null,
+        Final: false
+      };
+
+      return song;
+    }
+
+    private firstFreeNumber(): number {
+      let number = 0;
+      const numbers = this.songsService.songs.value.map(_ => _.Number);
+      while (numbers.indexOf(++number) !== -1) { }
+      return number;
+    }
 }