Bonjour,

Ayant suivi le cours Développez vos applications avec Angular/typescript, Je souhaite pouvoir ajouter de façon dynamique des input type "file" dans un formulaire a l'aide d'un FormArray qui renvoit les données vers mon Subject.

J'ai plusieurs problèmes ici :

- la création du FormArray dans le form-group qui n’apparaît pas 

- la gestion des nouvelles données dans mon Subject de type Array

- la récupération de ces donnés sous la forme de liste dans une balise audio

Voici le code :

Subject :

export class Records {
    tracks: [''];
  constructor(public title: string,
              ) {
  }

Formulaire :

<div class="container">
    <div class="col-sm-8 col-sm-offset-2">
        <h2>Enregistrer un nouveau vinyle</h2><br />
        <form [formGroup]="recordForm" (ngSubmit)="onSaveRecords()">
            <div class="form-group-row">
                <label for="title">Titre</label>
                <input type="text" id="title" class="form-control" formControlName="title">
            </div>
 
  
            <div class="form-group-row" formArrayName="tracks">
              <div class="form-group row" *ngFor="let trackControl of getTracks().controls; let i=index;">
                <label>Track {{ i + 1 }}</label>
                <input type="file" [formControlName]="i" class="form-control" placeholder="mp3 seulement"(change)="detectAudioFiles($event)" accept="audio/mp3">
                 <p class="text-success" *ngIf="audioFileUploaded">Audio chargé !</p>
                 <p class="text-danger" *ngIf="audioFileIsUploading">Chargement Audio ..</p>
                  <div class="form-group">
                      <button class="btn btn-success" [disabled]="recordForm.invalid || audioFileIsUploading" id="newAudioForm"(click)="onNewAudioForm()">Ajoutez Un Track</button>
                   </div>
              </div>
            </div>
            <button class="btn btn-success" [disabled]="recordForm.invalid"
                    type="submit">Enregistrer</button>
        </form>
    </div>
</div>

Formulaire.ts:

    initRecordForm() {
      this.recordForm = this.formBuilder.group({
            title: ['', Validators.required],
         
            tracks: this.formBuilder.array([])
        });
    }

 onSaveRecords() {
        const title = this.recordForm.get('title').value;
        
         if (this.audioFileUrl && this.audioFileUrl !== '') {
           newRecords.tracks [''] = this.audioFileUrl;
         }
        this.recordsService.createNewRecords(newRecords);
        this.router.navigate(['/records']);
    }

getTracks(): FormArray {
          return this.recordForm.get('tracks') as FormArray;
    }

    onNewAudioForm() {
      const newTrackControl = this.formBuilder.control(null);
      this.getTracks().push(newTrackControl);
    }

Je veux ensuite afficher la liste des différents uploads au sein de l'objet records (après avoir choisi un record dans la liste). 

template :

<div class="row">
  <div class="col-xs-10">
    <div class="list-group">
      <h1>{{ records.title }}</h1>
        <audio controls  style="width:500px;" >
        <source [src]="records.tracks" type="audio/mp3">
          <source [src]="records.tracks" type="audio/mp3">
          <source [src]="records.tracks" type="audio/mp3">
          <source [src]="records.tracks" type="audio/mp3">       
      </audio><br/>
      </div>
    <button class="btn btn-primary" (click)="onBack()">Retour</button>
  </div>

Script :

export class TracksListComponent implements OnInit {

  records: Records;
  isAuth: boolean;

  constructor(private route: ActivatedRoute, private recordsService: RecordsService,
              private router: Router) { }

  ngOnInit() {
    this.records = new Records('', '', '', '');
    const id = this.route.snapshot.params['id'];
    this.recordsService.getSingleRecords(+id).then(
      (records: Records) => {
        this.records = records;
      }
    );
    this.recordsService.getAudioFile(+id).then(
      (records: Records) => {
        this.records = records;
      }
    );
    this.recordsService.emitRecords();
    this.recordsService.getRecords();
    firebase.auth().onAuthStateChanged(
      (user) => {
        if (user) {
          this.isAuth = true;
        } else {
          this.isAuth = false;
        }
      }
    );
  }

  onBack() {
    this.router.navigate(['/records/view/:id']);
  }

}

Record.Service :

export class RecordsService {

    records: Records[] = [];
    recordsSubject = new Subject < Records[] > ();

    createNewRecords(newRecords: Records) {
        this.records.push(newRecords);
        this.saveRecords();
        this.emitRecords();
    }

   getRecords() {
        firebase.database().ref('/records')
            .on('value', (data: DataSnapshot) => {
                this.records = data.val() ? data.val() : [];
                this.emitRecords();
            });
    }

    getSingleRecords(id: number) {
        return new Promise(
            (resolve, reject) => {
                firebase.database().ref('/records/' + id).once('value').then(
                    (data: DataSnapshot) => {
                        resolve(data.val());
                    }, (error) => {
                        reject(error);
                    }
                );
            }
        );
    }

getAudioFile(id: number) {
        return new Promise(
            (resolve, reject) => {
                firebase.database().ref('audios/' + id).once('value').then(
                    (data: DataSnapshot) => {
                        resolve(data.val());
                    }, (error) => {
                        reject(error);
                    }
                );
            }
        );
    }

Je n'arrive pas á afficher le formArray a la suite du formulaire, de plus je ne suis pas certain du format a donner dans le subject aux différents uploads afin de pouvoir tous les stocker sans limite de nombre.

Merci d'avance,

-
Edité par TotoGt 8 octobre 2018 à 14:29:41