web-dev-qa-db-fra.com

Accès aux champs de saisie à l'intérieur Angular Matériau

Cela fait des jours que j'essaie d'obtenir des données à partir de champs de saisie dans une table de matériaux Angular Material).

Je remplis essentiellement un tableau avec des valeurs qui proviennent d'une API, mais chaque fois que nous n'obtenons aucune date, dans mon cas, un cours n'a pas de date planifiée, j'insère une zone de texte où la valeur doit être affichée afin que l'utilisateur puisse fixer une date pour ce cours spécifique.

Comme ça: Example Remarque: Désolé pour la censure, les noms liés au travail ont dû être supprimés.

Voici mon code html:

<mat-card>
    <form  #traineeForm="ngForm">
      <mat-form-field>
        <input  readonly matInput type="text" name="name" [ngModel] = "trainee.name"  #name="ngModel">
      </mat-form-field>
      <mat-form-field>
        <input readonly matInput email type="text"  name="email" [ngModel] = "trainee.email" #email="ngModel">
      </mat-form-field>
      <mat-form-field>
        <input readonly matInput type="text"  name="type" [ngModel] = "trainee.type" #type="ngModel">
      </mat-form-field>
      <button mat-raised-button color ="primary" type ="submit">Edit</button>
      <button mat-raised-button color ="warn" type ="submit" (click)="onDelete(trainee.id)">Delete</button>
    </form>
  </mat-card>
<br>
  <mat-card>
    
      <table mat-table [dataSource]="courses" class="mat-elevation-z8">
      
      <ng-container matColumnDef="courseOrderID">
        <th mat-header-cell *matHeaderCellDef>Course Order ID</th>
        <td mat-cell *matCellDef="let element"> {{element.courseOrderID}}</td>
      </ng-container>
      
       <ng-container matColumnDef="title">
          <th mat-header-cell *matHeaderCellDef>Course Title </th>
          <td mat-cell *matCellDef="let element"> {{element.title}}</td>
      </ng-container>
      <ng-container matColumnDef="description">
          <th mat-header-cell *matHeaderCellDef>Course Description </th>
          <td mat-cell *matCellDef="let element"> {{element.description}}</td>
       </ng-container>
      <ng-container matColumnDef="duration">
          <th mat-header-cell *matHeaderCellDef>Duration </th>
          <td mat-cell *matCellDef="let element"> {{element.duration}}</td>
      </ng-container>
      <ng-container matColumnDef="scheduledDate">
        <th mat-header-cell *matHeaderCellDef>Scheduled Date </th>
      <td mat-cell *matCellDef="let element">
         <mat-form-field>
              <input matInput [matDatepicker]="picker" placeholder="Choose a date">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>
         {{element.scheduledDate}}</td>
      </ng-container>
      <ng-container matColumnDef="trainer">
          <th mat-header-cell *matHeaderCellDef>Trainer </th>
          <td mat-cell *matCellDef="let element">
              <mat-form-field><input matInput color="warn" *ngIf="!element.trainer"></mat-form-field> {{element.trainer}}</td>
      </ng-container>
      <ng-container matColumnDef="save">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let element">
              <button mat-raised-button color ="primary" type ="submit" (click)="onSaveAssignment(trainee, element, picker)">Save</button></td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="coursesdisplayColumns">
      </tr>
      <tr mat-row *matRowDef="let courses; columns: coursesdisplayColumns"></tr>
      </table>
      <br>
 
      </mat-card>

Et voici mon code TypeScript:

import { Trainee } from '../trainees.model';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { TraineesService } from '../../trainees.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Course } from '../../courses/courses.model';
import { CoursesService } from '../../courses.service';
import { Assignment } from '../../assignments/assignments.model';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-trainee-details',
  templateUrl: './trainee-details.component.html',
  styleUrls: ['./trainee-details.component.css']
})


export class TraineeDetailsComponent implements OnInit, OnDestroy {
  
  private traineeId: string;
  trainee: Trainee;
  assignment: Assignment;
  courses: Course[] = [];
  coursesdisplayColumns = ['courseOrderID', 'title','description','duration','scheduledDate','trainer','save'];
  
  constructor(public traineeService: TraineesService, public route: ActivatedRoute, public coursesService: CoursesService){}

  ngOnInit() {
    this.route.paramMap.subscribe((paramMap: ParamMap) => {
      if(paramMap.has('traineeId')){
        this.traineeId = paramMap.get('traineeId');
        this.trainee = this.traineeService.getTrainee(this.traineeId);
      }
    });
    this.coursesService.getCoursesByJob(this.trainee.job);
    this.coursesService.getCoursesUpdateListener().subscribe((courses: Course[]) =>{
      this.courses = courses;
    });
  }

  onDelete(traineeId: string)
  {
    this.traineeService.deleteTrainee(traineeId);
  }
  onSaveAssignment(trainee: Trainee, selectedCourse: Course, dateForm: Date){
  
    console.log(trainee.id);
    console.log(selectedCourse.description);
    console.log(dateForm);
  }
  ngOnDestroy() {

  }
}

Lorsque j'appelle onSaveAssignment (), l'ID du stagiaire et l'ID du cours sont correctement enregistrés dans la console car ceux-ci sont définis dans TypeScript, mais je ne sais pas comment dois-je apporter cette date sélectionnée dans l'interface, j'ai essayé avec ng-model mais cela n'a pas fonctionné et j'ai dû définir un formulaire pour chaque entrée et cela n'a toujours pas fonctionné.

Existe-t-il un moyen d'obtenir ces valeurs à partir des entrées de chaque ligne lorsque vous appuyez sur le bouton Enregistrer?

Ou si je mets 1 bouton pour chacun d'eux, y a-t-il un moyen de faire un foreach sur chaque valeur d'entrée dans l'interface?

javascripthtmlangularangular-material
6
ACristian24

Vous pouvez obtenir les valeurs avec ngModel en créant un objet contenant toutes les valeurs en utilisant l'index comme attribut.

Dans votre composant, placez un objet:

public myDates : any = {};

Utilisez ensuite ngModel avec l'index de votre date d'entrée:

<ng-container matColumnDef="scheduledDate">
  <th mat-header-cell *matHeaderCellDef>Scheduled Date </th>
  <td mat-cell *matCellDef="let element; let i = index">
    <mat-form-field>
      <input matInput [(ngModel)]="myDates[i]" [matDatepicker]="picker" placeholder="Choose a date">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  </td>
</ng-container>

Pour chaque ligne, il ajoutera un attribut à l'objet myDates. L'utilisation d'index permet de garantir l'unicité. Votre objet ressemblera à: {1: date1, 2: date2 ...}.

Ensuite, vous pouvez obtenir la valeur en connaissant l'index de la ligne. Vous pouvez l'obtenir directement en cliquant sur le bouton:

<ng-container matColumnDef="save">
  <th mat-header-cell *matHeaderCellDef></th>
  <td mat-cell *matCellDef="let element; let i = index">
    <button mat-raised-button color ="primary" type ="submit" (click)="onSaveAssignment(trainee, element, myDates[i])">Save</button>
  </td>
</ng-container>
6
Powkachu