#Send MatListOption with inputs

39 messages · Page 1 of 1 (latest)

hard plaza
# 

<h2 mat-dialog-title [class]="data.color">{{ data.title }}</h2>
<ng-container>
    <ng-container>
        <mat-dialog-content>
            <p [innerHTML]="data.subtitle"></p>
        </mat-dialog-content>
    </ng-container>

    <mat-selection-list #options>
        <mat-list-option *ngFor="let cert of certidoes; let index = index; let last = last" [value]="cert">
            <tr>
                <td>
                    <strong>{{ cert.numero_cpha }}</strong>
                </td>
                <td>
                    <form [formGroup]="form">
                        <mat-form-field class="example-form-field" appearance="standard">
                            <mat-label>nº OP</mat-label>
                            <input matInput #opField formControlName="op">
                            <!--mat-error *ngIf="form.get('op')?.invalid">{{ getErrorsMsgField() }}</mat-error-->
                        </mat-form-field>
                    </form>
                </td>
            </tr>
            <mat-divider *ngIf="!last"></mat-divider>
        </mat-list-option>
    </mat-selection-list>

    <mat-divider></mat-divider>

    <p style="padding-top: 15px;">
        Opções selecionadas: {{options.selectedOptions.selected.length}}
    </p>

    <mat-dialog-actions align="end">
        <button mat-button [mat-dialog-close]="true" color="primary"
            (click)="onClick(options.selectedOptions.selected)">Enviar</button>
    </mat-dialog-actions>
</ng-container>```
# 
onClick(cert: MatListOption[]) {
   // this.dialogRef.close(cert.map(o => o.value));
   console.log(cert.map(o => o.value));
  }```
idle jay
#

What your API expects to receive?

hard plaza
#

I need to receive what was selected, what I already get with this code in onClick, and what was inserted in the input

#

For example... [1, 123456] For input id 1 the value is 123456

#

understand?

idle jay
#

Yes, but exactly how the payload has to be shaped?

hard plaza
idle jay
#

Again: what type of payload does your API endpoint expect?

hard plaza
#

I did not understand your question

idle jay
#

Where are you sending those data?

hard plaza
#

It's a dialog. After getting this data, I send it to my service to send it to the database

idle jay
#

Please, post the code of the service's method you use for sending these data.

hard plaza
#

Want to see the receipt code?

#

The code is not quite ready yet. I need to receive the information from the inputs to correct the sending to the service

idle jay
#

The method issuing the http request.
I need to know what your backend expects to receive.

hard plaza
#

My backend expects to receive the ID of the selected Certificate, the OP that will be inserted in the input, referring to this certificate and the date it was sent

# 
 * @returns Observable<Array<ICertidao>>
  */
   pagamentoAll() {
    //console.log(autoriza);
    return this.http.get<Array<ICertidao>>(`${AppService.apiUrl}/certidao/paymentAll`);
  }````  the service is this. I have to pass an array of ids, with the value of the corresponding inputs
#

this is my idea

idle jay
#

Please, post the code or the spec of that API endpoint because I cannot understand your requirement.

hard plaza
#

my submission would be like this... ```ts
.
.
.
console.log(ids);

       this.pagamentosService.pagamentoAll(cphas).subscribe({
          next: (paga) => {
            this.paga = paga;
            this.loading = false;
          }
        });
        
        this.certService.proceedAll(ids, user_id, departamento, observacao).subscribe({
           next: () => this.loadMyCerts()
         });

.
.
.````

hard plaza
#

👇🏿

a.png
#

When clicking on the checkbox to select what I want to send, I need to fill in the input referring to what I selected.
I need that when I click send, the id of what I selected and the input information are sent in an array

idle jay
#

You should send an array of objects.
Every object having two properties: id and op

hard plaza
#

Exactly!
the ids I am able to send in the onClick function. But I can't send the inputs together. How do I do?

#

I tried using formGroup but it didn't work

idle jay
#

You should setup multiple formgroups of two inputs: the first one with readonly attribute.
They should be part of a formarray.
In anoher formaraay you should put the checkbox, responsible of toggling disabled property to aforementioned formgroups by their index into the array.

hard plaza
idle jay
#

Can you setup a minimal stackblitz with some fake data?

hard plaza
#

ofcourse!

hard plaza
idle jay
#

It lacks ICertidao interface definition

hard plaza
idle jay
#

The interface definition

#

export interface ICertidao {...

hard plaza
#

is there

#

updated