IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Bouton submit hors d'un form


Sujet :

Angular

  1. #1
    Membre actif
    Homme Profil pro
    Reconversion
    Inscrit en
    novembre 2018
    Messages
    383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Reconversion
    Secteur : Santé

    Informations forums :
    Inscription : novembre 2018
    Messages : 383
    Points : 224
    Points
    224
    Par défaut Bouton submit hors d'un form
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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..

  2. #2
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2019
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2019
    Messages : 404
    Points : 602
    Points
    602
    Par défaut
    salut l'ami,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  3. #3
    Membre actif
    Homme Profil pro
    Reconversion
    Inscrit en
    novembre 2018
    Messages
    383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Reconversion
    Secteur : Santé

    Informations forums :
    Inscription : novembre 2018
    Messages : 383
    Points : 224
    Points
    224
    Par défaut
    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 !

  4. #4
    Membre actif
    Homme Profil pro
    Reconversion
    Inscrit en
    novembre 2018
    Messages
    383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Reconversion
    Secteur : Santé

    Informations forums :
    Inscription : novembre 2018
    Messages : 383
    Points : 224
    Points
    224
    Par défaut
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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...

  5. #5
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2019
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2019
    Messages : 404
    Points : 602
    Points
    602
    Par défaut
    ça va, cela semble correcte !
    simple et efficace

  6. #6
    Membre actif
    Homme Profil pro
    Reconversion
    Inscrit en
    novembre 2018
    Messages
    383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Reconversion
    Secteur : Santé

    Informations forums :
    Inscription : novembre 2018
    Messages : 383
    Points : 224
    Points
    224
    Par défaut
    sinon tu utilises quoi comme librairie graphique ?

  7. #7
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2019
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2019
    Messages : 404
    Points : 602
    Points
    602
    Par défaut
    angular material, c'est très bien !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Plusieurs form avec un seul bouton submit ?
    Par Amelie MOREAU dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 06/03/2013, 11h43
  2. Choix de l'action de boutons submit dans un <form>
    Par BILANGA dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 26/10/2009, 08h11
  3. Bouton submit sous forme d'image
    Par hraiwen dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 31/08/2009, 17h11
  4. Réponses: 2
    Dernier message: 06/02/2009, 15h55
  5. Acesskey dynamique dans un form à plusieurs boutons submit ?
    Par boteha dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 05/09/2005, 17h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo