1

inserir a descrição da imagem aquiTenho um código onde eu mostra os dias da semana, aí pra cada dia da semana eu tenho 3 ações: 1 - um select com opções; 2 - um botão que abre um modal para colocar uma observação; 3 - um input que anexa um pfd, PNG...

Nisso ele vai incrementando com *ngFor, e depois do *ngFor eu tenho um botão pra finalizar, onde eu devo gravar todos os dados que o usuário colocou nas 3 ações para todos os dias da semana.

A questão é: como consigo fazer com que esse ultimo botão de 'finalizar' capture todos esses dados? levando em conta que eu preciso saber pra qual foi o dia que ele colocou as 3 ações.

HTML DO *NGFOR:

<div class="row hours_week" *ngFor="let DaysANDHours of DetailWeek">
  <div class="col-sm day">
    <p class="text-light">{{DaysANDHours.day}}:</p>
  </div>
  <!-- ! -->
  <div class="col-sm-lg">
    <p class="text-light">{{DaysANDHours.hours}} | <span class="text-danger">- {{DaysANDHours.less}}</span></p>
  </div>
  <!-- ! -->
  <!-- <div class="col">

  </div> -->
  <!-- ! -->
  <div class="col-sm">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
      </div>
      <select class="custom-select" id="inputGroupSelect01">
        <option selected>Motivo</option>
        <option value="1">Um</option>
        <option value="2">Dois</option>
        <option value="3">Três</option>
      </select>
    </div>
  </div>
  <!-- ! -->
  <div class="col-sm">
    <button class="btn btn-light but" data-toggle="modal"
      data-target="#ExemploModalCentralizado">Observação</button>
    <!-- Modal -->
    <div class="modal fade" id="ExemploModalCentralizado" tabindex="-1" role="dialog"
      aria-labelledby="TituloModalCentralizado" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="TituloModalCentralizado">Escreva aqui sua observação</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <textarea name="" id="obs" cols="60" rows="10" #titleInput></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal"
              (click)="SaveText(titleInput.value)">Salvar mudanças</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ! -->
  <div class="col-sm input-wrapper text-center">
    <label for='{{DaysANDHours.id}}'>
      Anexar
    </label>
    <input id='{{DaysANDHours.id}}' type='file' value='' (click)="getFile()" />
    <span id='{{DaysANDHours.id2}}' class="text-light"></span>
  </div>
  <br>
</div>

Depois vem o botão:

<button type="button" class="btn btn-primary button_salve btn-lg" (click)="finish()">Finalizar</button>

TS:

 daysAndHour() {

    this.detailService.DaysAndHoures()
      .subscribe(daysHours =>
        this.DetailWeek = daysHours,
        response => //HttpErrorReponse
          this.notificationService.notify(response.error.message))
  }

  getFile() {

    this.DetailWeek.forEach(e => {
      var $input = (<HTMLInputElement>document.getElementById(e.id)),
        $fileName = (<HTMLInputElement>document.getElementById(e.id2));

      $input.addEventListener('change', function () {

        $fileName.textContent = this.value;

      });
      this.file = $fileName.textContent
    });
  }

  SaveText(value) {
    this.obs = value;
    this.obss.push({
      observacoes: this.obs
    })
  }

  finish() {
    var dados = (<HTMLInputElement>document.getElementById('inputGroupSelect01')).value;
    console.log(dados);

  }

Alguém poderia me ajudar?

obs.: Os dias vem do DB junto com as horas.

2
  • Maria Como assim saber o dia? Essa parte eu não entendi. Mas, o que você deve fazer é usar os reactive forms. Assim, fica salvo os valores no form, até que o user envia os dados. Acho que seu problema está em tentar usar métodos nativos do JS e não o método de form do Angular. 27/02/2019 às 16:52
  • @FábioMiranda, acabei de adicionar a imagem para melhor entendimento.
    – Maria
    27/02/2019 às 20:49

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .