Bouton submit hors d'un form

Version imprimable

Me revoilà rapide comme un spam lol,

Je bosse sur une table avec angular material et sur chaque ligne j'ai un bouton qui permet d'updater les éléments de chaque cellule .
Mais ça n'update pas car dans le code le button est hors du form et de plus il est dissocié de l'input que je dois récupérer

le code extrait du datable:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 -------------------------------------------------------------------------- <td> <div *ngIf="column==='edit'; else dataField"> <button type="submit" (click)="updatePerson(person.id)">Done</button>//On finalise l'update en cliquant 'done' </div> <ng-template #dataField> <mat-form-field> <mat-label>{{column}}</mat-label> <input type="text" matInput [(ngModel)]=person[column]> </mat-form-field> </ng-template> </td> -----------------------------------------------------------------------------
le form qui injecte dans le datatable :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div> <form #f="ngForm" (ngSubmit)="addPerson()"> <div class="form-group"> <label for="name">Nom</label> <input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" /> </div> <div class="form-group"> <label for="age">Age</label> <input type="number" class="form-control" name="age" id="age" [(ngModel)]="person.age" /> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">Ajouter une personne</button> </div> </form> </div>
Le but est de récupérer l'input lorsque la méthode updatePerson(person.id) est appelée au clic du button.
J'en profite pour demander conseil sur une lib grapique autre que angular material, qu'utilisez-vous ?
Merci encore..

salut l'ami,
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <td> <div *ngIf="column==='edit'; else dataField"> <button type="submit" (click)="updatePerson(person.id, personInput.value)">Done</button>//On finalise l'update en cliquant 'done' </div> <ng-template #dataField> <mat-form-field> <mat-label>{{column}}</mat-label> <input #personInput type="text" matInput [(ngModel)]=person[column]> </mat-form-field> </ng-template> </td>
tu veux faire quoi en realité ?
peut être il existe une meilleure façon d faire
si tu peux mettre cette partie sur stackblitz je pourrais t'aider

sinon il existe bootstrap
https://ng-bootstrap.github.io/#/home

02/05/2021, 15h27
olivier252

arg, je viens de voir ta réponse à l'instant. Je n'ai pas eu le temps de me repencher sur le problème entre temps mais pour t'en dire plus :

En fait j'ai suivi le tuto d'un gars qui créé un datatable avec la fonctionnalité d'update, mais dans son exemple lui ne traite pas le sujet avec un backend, il n'y a aucune logique derrière, que des datas hardcodées. Le but pour moi serait de faire tourner son exemple de template avec ma logique derrière en y ajoutant donc la fonctionnalité d'update :

Tout d'abord voici le dépôt du tuto du gars :
https://github.com/muhimasri/angular...master/src/app
Et le lien de son tuto où il y a une démo, etil reprend son code pas à pas ( j'essaierai d'envoyer un stackblitz de mon code ) :
https://muhimasri.com/blogs/create-a...ular-material/

j'ai reproduit exactement son template de dataTable (avec un modele à moi de type 'Person', mais c'est secondaire) dans le template j'ai tenté l'ajout de la fonction 'updatePerson(person.id)' dans ce bouton d'update afin de m'exercer à monter un crud.
Mais déclencher un appel de fonction dans ce bouton est un non sens en soi puisque il n'y a aucune soumission de quoi que ce soit. D'où ma question du début, du coup effectivement la variable locale pourrait être pertinente alors. Je vais m'y remettre demain.
Merci à toi !

Me revoilà

J'ai réussi à faire ma fonctionnalité de modification d'une table avec angular material, mais j'ai qd même pas mal galère (10 min sur devextreme, 1 jour et demi avec angular material la galère avec l'import des modules...)
Pour cela j'ai utilisé le modeuleMatDialog et j'ai abandonné l'idée de la variable locale (je n'ai pas su lui faire reourner un objet de la table)
Du coup ça donne ceci :

Html de la table :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table mat-table [dataSource]="personTemplate" class="mat-elevation-z8">
 
  <ng-container matColumnDef="{{ column }}" *ngFor="let column of displayedColumns">
    <th mat-header-cell *matHeaderCellDef>
      <span *ngIf="column !== 'edit'">
        {{ column }}
      </span>
    </th>
 
    <td mat-cell *matCellDef="let person">
 
 
        <div class="btn-edit" *ngIf="column === 'edit'; spanHeader">
          <button (click)="openDialog(person)">Edit</button>
        </div>
        <span #spanHeader>
          {{ person[column] }}
        </span>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

le TS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 person: Person = new Person();
  personTemplate: Person[];
  displayedColumns = ['id', 'name', 'age', 'edit'];
 
updatePerson(person: Person): void {
    this.apiService.updatePersonService(person).subscribe((res) => {
      console.log(res);
    })
  }
 
  openDialog(person) {
 
    const dialogRef: MatDialogRef<DialogBoxComponent> = this.dialog.open(DialogBoxComponent, {
      width: '200px',
      data: person
    });
 
    dialogRef.afterClosed().subscribe( () => {
        this.updatePerson(person);
    });
    this.table.renderRows();
  }
 
// Le service vite fait...
  updatePersonService(person: Person): Observable<Person> {
    return this.http.put<Person>(`${this.baseURL}people/${person.id}`, person);
  }

La boite de dialog qui permet de prendre en compte l'update :
HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<h1 mat-dialog-title>Modifier cette personne ?</h1>
<div mat-dialog-content>
 <mat-form-field>
   <mat-label>Nom</mat-label>
    <input matInput [(ngModel)]="data.name">
  </mat-form-field>
  <mat-form-field>
    <mat-label>Age</mat-label>
    <input matInput [(ngModel)]="data.age">
  </mat-form-field>
</div>
 
<div mat-dialog-actions>
    <button mat-button (click)="doAction()">Modifier</button>
    <button mat-button (click)="closeDialog()" mat-flat-button color="warn">Cancel</button>
</div>

enfin le ts de la boite de dialog

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export class DialogBoxComponent {
 // action: string;
  local_data: any;
  person: Person;
 
  constructor(
    private dialogRef: MatDialogRef<DialogBoxComponent>,
    @Optional() @Inject(MAT_DIALOG_DATA) public data: Person)
    {
    this.local_data = { ...data };
  }
 
  doAction() {
    this.dialogRef.close({
     // event: this.action, 
      data: this.local_data
    });
    console.log("doaction")
    console.log(this.local_data)
  }
 
  closeDialog() {
    this.dialogRef.close({event:'Cancel'});
  }
}

Bon il est possible que ce soit un peu foireux de ci delà,mais ça fonctionne comme attendu. Krakatoa si jamais tu passes par là me donner ton avis...:whistle:

04/05/2021, 12h03
krakatoa

ça va, cela semble correcte !
simple et efficace
04/05/2021, 13h13
olivier252

sinon tu utilises quoi comme librairie graphique ?
04/05/2021, 13h42
krakatoa

angular material, c'est très bien !