Changing parameters to Modal

Asked

Viewed 741 times

0

I’m having trouble passing parameters to my Modal, I would like to present the data of the selected tuple, I was able to isolate the value properly (atestei by the console.log), however, this same one is not being passed to my modal, looks like it would need something like an asynchronous call, even if every operation takes place inside my front (doesn’t make a new bank call).

The intention is to make a form, however, just to verify that the data are being passed properly, I will use the simple passage of my JSON, solving this would be great to continue.

Filter code:

 filtrardetalhes(value){

     this.planilhaDetalhes = this.planilha.filter(x => 
        x.PID == value
     );
     console.log(this.planilhaDetalhes)

 }

Modal:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" (click)="filtrardetalhes(planilha.PID)">
    Details
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <img src="assets/Detalhes.png" width="25px"/>
                <h5 class="modal-title" id="exampleModalLabel">  Detalhes </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {{planilhaDetalhes}}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" (click) = "AtualizaBtn()">Save changes</button>
            </div>
        </div>
    </div>
</div>

I put an "Input" in my variable "Spreadsheet" but only for test purposes: 

  @Input('planilhaDetalhes') public planilhaDetalhes

How the parameter is being passed: inserir a descrição da imagem aqui

It is worth mentioning that the filter is functional, I only left my JSON closed because it contains confidential business information, however this 1 position JSON is the filter of a 74 (and it accompanies where I click on DETAILS)

EDIT:

Solved, I passed the JSON in its entirety, however, I am in doubt if I can pass any specific parameter, for example{{planilhaDetalhes.CAMPO | JSON}}

Follow as the passage to my form: inserir a descrição da imagem aqui

Functional form (unable to pass parameters yet) within BODY MODAL:

   <form class="meuFormulario" [formGroup]="cadastroForm" (ngSubmit)="onSubmit()">
                                  <div class="form-group">
                                      <label for="exampleInputEmail1">Cliente</label>
                                      <input type="text" class="form-control" formControlName="CLIENTE" value="{{planilhaDetalhes.PID}}"> 
                                    </div>
                                    <div class="form-group">
                                      <label for="exampleInputPassword1">CODIGO DMD</label>
                                      <input type="text" class="form-control" formControlName="CODIGODMD" value="{{planilhaDetalhes.CODIGODMD}}">
                                    </div>
                                    <div class="form-group">
                                      <label for="exampleInputPassword1">Sigla RM</label>
                                      <input type="text" class="form-control" formControlName="SIGLARM" value="{{planilhaDetalhes.SIGLARM}}">
                                    </div>
                                    <div class="form-group">
                                      <label for="exampleInputPassword1">Sigla Portal</label>
                                      <input type="text" class="form-control" formControlName="SIGLAPORTAL" value="{{planilhaDetalhes.SIGLAPORTAL}}">
                                    </div> 
                                    <div class="form-group">
                                      <label for="exampleInputPassword1">Comercial</label>
                                      <input type="text" class="form-control" formControlName="COMERCIAL" value="{{planilhaDetalhes.COMERCIAL}}">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Atendimento</label>
                                        <input type="text" class="form-control" formControlName="ATENDIMENTO" value="{{planilhaDetalhes.ATENDIMENTO}}">
                                    </div>  
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Auditoria</label>
                                        <input type="text" class="form-control" formControlName="AUDITORIA" value="{{planilhaDetalhes.AUDITORIA}}">
                                    </div> 
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Periodicidade</label>
                                        <input type="text" class="form-control" formControlName="PERIODICIDADE" value="{{planilhaDetalhes.PERIODICIDADE}}">
                                    </div> 
                                    <div class="form-group">
                                      <label for="exampleInputPassword1">Entrega</label>
                                      <input type="text" class="form-control" formControlName="ENTREGA" value="{{planilhaDetalhes.ENTREGA}}">
                                  </div> 
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Responsável</label>
                                        <input type="text" class="form-control" formControlName="RESPONSAVEL" value="{{planilhaDetalhes.RESPONSAVEL}}">
                                    </div> 
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Layout</label>
                                        <input type="text" class="form-control" formControlName="LAYOUT" value="{{planilhaDetalhes.LAYOUT}}">
                                    </div> 
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">DM</label>
                                        <input type="text" class="form-control" formControlName="DM" value="{{planilhaDetalhes.DM}}">
                                    </div> 
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">ODSDM</label>
                                        <input type="text" class="form-control" formControlName="ODSDM" value="{{planilhaDetalhes.ODSDM}}">
                                    </div> 
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">EFV</label>
                                        <input type="text" class="form-control" formControlName="EFV" value="{{planilhaDetalhes.EFV}}">
                                    </div> 


                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Caminho</label>
                                        <input type="text" class="form-control" formControlName="CAMINHO" value="{{planilhaDetalhes.CAMINHO}}">
                                    </div> 
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Origem</label>
                                        <input type="text" class="form-control" formControlName="ORIGEM" value="{{planilhaDetalhes.ORIGEM}}">
                                    </div> 
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Comercial</label>
                                        <input type="text" class="form-control" formControlName="COMERCIAL" value="{{planilhaDetalhes.COMERCIAL}}">
                                    </div> 
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Portal</label>
                                        <input type="text" class="form-control" formControlName="PORTAL" value="{{planilhaDetalhes.PORTAL}}">
                                    </div> 
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">FTP</label>
                                        <input type="text" class="form-control" formControlName="FTP" value="{{planilhaDetalhes.FTP}}">
                                    </div> 
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Observação</label>
                                        <input type="text" class="form-control" formControlName="OBSERVACAO" value="{{planilhaDetalhes.OBSERVACAO}}">
                                    </div> 
                                    <div class="form-group">
                                      <label for="exampleInputPassword1">Mailing</label>
                                      <input type="text" class="form-control" formControlName="MAILING" value="{{planilhaDetalhes.MAILING}}">
                                     </div> 
                                     <div class="form-group">
                                      <label for="exampleFormControlSelect1">Example select</label>
                                      <select class="form-control" id="exampleFormControlSelect1">
                                        <option>Produção</option>
                                        <option>Other</option>
                                      </select>
                                    </div>
                                    </form>

                </div>
json angularjs angular

  • So it was very confusing your question, you have the function filtration() that is not being executed anywhere.

  • Sorry, I forgot to include the part of the call, edited with it included now!

  • And what would be spreadsheet.?

  • The ID, this is coming from my INPUT for Ngfor which builds the initial table (where the detail button, which opens the modal stays), the filter is functional, the problem I am facing would be in passing parameters to my modal.

  • Apparently it filters after opening the modal, so the modal only gets "Object Object" from my variable.

  • 3

    change {{planilhaDetalhes}} for {{planilhaDetalhes | json}}

  • Solved! Good Gaspar! Thank you very much!

  • Another question only, I managed to pass the | JSON, but I’m not getting past worksheets.FIELDEXAMPLE | JSON, would have some way to do this?

  • Could you explain to me the operation of this pipe briefly "|"?

  • The pipe json (| json) is used to transform the values in the fields. If you want to build a form in this modal, just inform planilhaDetalhes.CAMPOEXEMPLOin the ngModel input of this field...

  • Pipe is basically to visually transform an object that you don’t want to change completely just to show the user in the view. The official documentation of the pipe is here

  • Thanks for the information about pipe, it will be very useful! Now the field question, when putting {{worksheet.PID}} in my form, it does not return any value. The only way to return something was {{worksheet | json}}.

  • I included the form for better understanding

  • I will edit my reply with the necessary information

  • Ok! Put it as an answer below and I will gladly vote for it!

  • It is edited in the answer! Any doubt let me know

  • Is there any other way than with ngModel? It appears that some features of ngModel will be removed/changed in the next versions of the angular, thus being able to compromise my application in case of update.

  • I did a horrendous gambit with ngFor failed in an example json and it worked

  • ngModel will never be removed from the 2+ angle, you can use it quietly. If you want to apply a form and control whether it is validated or not, it is used in another way to control the state, but it is the same concept and not very recommended for those who start it. Start using separate objects and validate the essentials, when everything is working, migrate forms with a more robust validation...

Show 14 more comments

1 answer

1


I do not understand if this is the case, but I believe that you want to open a modal in another component and is not receiving the parameters correctly.


In the calling component you use this data:

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ComponenteModal } from '...';

constructor(private modal: NgbModal) {}

abrirModal(objetoPraPassar: any) {
  const modalRef = this.modal.open(ComponenteModal);
  modalRef.componentInstance.planilhaDetalhes = objetoPraPassar;
}

In "Componentemodal" you would do so

export class ComponenteModal {

  @Input()
  planilhaDetalhes: any;
}

EDIT: Now that you have the object with the values build a form on body modal as for example:

<div class="form-group">
  <label>Descrição</label>
  <input name="descricao" class="form-control" [(ngModel)]="entity.descricao" required>
</div>

Where [ngModel] will receive the entered values and display to the user in the object entity.descricao, (ngModel) will update the setando variable entity.descricao with the entered values, so use [(ngModel)] to update and receive values.

In cases that you want to show some information to the user that is not inside ngModel is used two keys, for example {{ entity.descricao }}

Browser other questions tagged json angularjs angular

You are not signed in. Login or sign up in order to post.