Add demo field to form

src/app/modules/sample-providers/components/form-control/form-control.component.scss

@@ -0,0 +1,19 @@
+:host {
+  label {
+    display: block;
+  }
+  input, textarea {
+    box-sizing: border-box;
+    padding: 10px;
+    border-radius: 5px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #555555;
+    &::placeholder {
+      border-color: #a0a0a0bd;
+    }
+    width: 100%;
+    display: block;
+    margin-bottom: 10px;
+  }
+}

src/app/modules/sample-providers/components/form-control/form-control.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-form-control',
+  template: `
+    <div class="form-control" *ngIf="t; else inputform">
+      <label>{{ l }}</label>
+      <textarea [formControl]="c"></textarea>
+    </div>
+    <ng-template #inputform>
+      <div class="form-control">
+        <label>{{ l }}</label>
+        <input type="text" [formControl]="c" />
+      </div>
+    </ng-template>
+  `,
+  styleUrls: ['./form-control.component.scss'],
+})
+export class FormControlComponent {
+  @Input() c: AbstractControl; // control
+  @Input() l: string; // label
+  @Input() t: boolean; // is textarea
+  // TODO add @Input checkbox, @Input file, @Input radio etc
+}

src/app/modules/sample-providers/components/submission-form/submission-form.component.html

@@ -1,28 +1,44 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
   <div>
-    <label for="label-name">
-      Name
-    </label>
-    <input  type="text"  id="label-name" formControlName="label_name"/>
+    <app-form-control
+      [c]="form.controls['label_name']"
+      [l]="'name'"
+      [t]='false'>
+    </app-form-control>
   </div>
   <div>
-    <label for="label-description">
-      Description
-    </label>
-    <textarea id="label-description" formControlName="label_description"></textarea>
+    <app-form-control
+    [c]="form.controls['label_description']"
+    [l]="'Description'"
+    [t]='true'>
+    </app-form-control>
     <div *ngIf="labelDescription.errors?.maxlength">
       Description cannot be over 200 characters.
     </div>
   </div>
   <div>
-    <label for="label-contact">
-      Contact email
-    </label>
-    <input  type="text" id="label-contact"formControlName="label_contact"/>
+    <app-form-control
+    [c]="form.controls['label_contact']"
+    [l]="'Contact email'"
+    [t]='false'>
+    </app-form-control>
     <div *ngIf="labelContact.errors?.email">
       Email must be in a valid format.
     </div>
   </div>
+
+  <div>
+    <label>
+      Upload Demo track
+    </label>
+    <br>
+    <br>
+    <input #fileInput type="file"/>
+    <br>
+    <br>
+    <audio #p src="" type="audio/mp3" controls></audio>
+  </div>
+
   <button type="submit" [disabled]="!this.form.valid || !this.form.dirty">
   Save
   </button>

src/app/modules/sample-providers/components/submission-form/submission-form.component.scss

@@ -1,18 +1,4 @@
 :host {
-  input, textarea {
-    box-sizing: border-box;
-    padding: 10px;
-    border-radius: 5px;
-    border-width: 1px;
-    border-style: solid;
-    border-color: #555555;
-    &::placeholder {
-      border-color: #a0a0a0bd;
-    }
-    width: 100%;
-    display: block;
-    margin-bottom: 10px;
-  }
   button {
     display: inline-flex;
     align-items: center;

src/app/modules/sample-providers/components/submission-form/submission-form.component.ts

@@ -1,22 +1,74 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Output,
+  EventEmitter,
+  Input,
+  ElementRef,
+  ViewChild,
+  HostListener,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
 import {
   AbstractControl,
   FormBuilder,
   FormGroup,
   Validators,
+  NG_VALUE_ACCESSOR,
+  ControlValueAccessor,
 } from '@angular/forms';
 
 @Component({
   selector: 'app-submission-form',
   templateUrl: './submission-form.component.html',
   styleUrls: ['./submission-form.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: SubmissionFormComponent,
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SubmissionFormComponent implements OnInit {
+export class SubmissionFormComponent implements OnInit, ControlValueAccessor {
   form: FormGroup;
 
+  f: File; // demo file
+
+  @ViewChild('p', { read: ElementRef }) p: ElementRef;
+
   @Output()
   submitForm = new EventEmitter<any>();
 
+  @Input()
+  onChange = (f: File) => {};
+
+  @HostListener('change', ['$event.target.files'])
+  emitFiles(e: FileList) {
+    this.f = e && e.item(0);
+    this.a();
+    this.onChange(this.f);
+  }
+
+  registerOnChange(fn) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn) {}
+
+  /** @ignore */
+  writeValue(value) {
+    if (value === null && this.f) {
+      this.f = null;
+    }
+  }
+  // add audioFile
+  a() {
+    this.p.nativeElement.src = URL.createObjectURL(this.f);
+  }
+
   constructor(private formBuilder: FormBuilder) {}
 
   ngOnInit(): void {

src/app/modules/sample-providers/sample-providers.module.ts

@@ -4,9 +4,14 @@ import { RouterModule } from '@angular/router';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FormContainerComponent } from './routes/form-container/form-container.component';
 import { SubmissionFormComponent } from './components/submission-form/submission-form.component';
+import { FormControlComponent } from './components/form-control/form-control.component';
 
 @NgModule({
-  declarations: [FormContainerComponent, SubmissionFormComponent],
+  declarations: [
+    FormContainerComponent,
+    SubmissionFormComponent,
+    FormControlComponent,
+  ],
   imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule],
 })
 export class SampleProvidersModule {}