0

Tenho um modal com um formulário em uma página com uma lista de itens cadastrados:

<div class="collection">
    <div class="collection-item row" *ngFor="let data of data$ | async">
      <div class="col s7">
        {{ data.name }}
      </div>
      <div class="col s5">
        <a title="Editar"><i class="fas fa-edit right"></i></a>
      </div>
    </div>
</div>

<!-- botão que abre modal -->
<div class="fixed-action-btn">
  <a
    class="btn-floating btn-large modal-trigger"
    href="#modal1">
      <fa-icon [icon]="['fas', 'plus']"></fa-icon>
  </a>
</div>


<!-- componente do modal -->
<div id="modal1" class="modal">
  <app-register-data>
  </app-register-data>
</div>

Esse modal, ao ser aberto pelo botão normal, cria um formulário vazio, sem dados, para criar um novo item. Mas eu quero passar um item para o mesmo formulário através de uma inbound property quando abrir através do formulário (indiferente se através de função ou do template HTML).

Internamente o componente app-register-data já trata dos erros se inbound property é inserida ou não:

abre formulário de alteração de objeto 'data'

<div>
  <app-register-data [data]="{id: 1, name: 'name'}"></app-register-data>
</div>

abre formulário de cadastro de objeto 'data'

<div>
  <app-register-data></app-register-data>
</div>
2
  • pq vc não passa [data]="null", não entendi qual é o problema 22/10/2019 às 20:52
  • O problema é o seguinte: há dois pontos onde eu quero chamar o mesmo modal, mas cada um com dados diferentes. 22/10/2019 às 22:17

1 Resposta 1

1

Se entendi bem oque você quer fazer é usar o mesmo componente para criar e editar dados usando apenas um componente no template!?

se for isso você pode fazer assim:

// Controller do componente de listagem
interface IItem {
    id: number;
    name: string; 
}

class ListComponent {
    formData: Item,

    editItem(item) {
       this.formData = item
    }

    newItem() {
       this.item = { id: 0, name: '' }
    }
}
<div class="collection">
    <div class="collection-item row" *ngFor="let data of data$ | async">
      <div class="col s7">
        {{ data.name }}
      </div>
      <div class="col s5">
        <a title="Editar" (click)="editItem(data)"><i class="fas fa-edit right"></i></a>
      </div>
    </div>
</div>

<!-- botão que abre modal -->
<div class="fixed-action-btn">
  <a
    (click)="newItem()"
    class="btn-floating btn-large modal-trigger"
    href="#modal1">
      <fa-icon [icon]="['fas', 'plus']"></fa-icon>
  </a>
</div>


<!-- componente do modal -->
<div id="modal1" class="modal">
  <app-register-data [data]="formData">
  </app-register-data>
</div>

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .