Inline liste modifiable des objets dans 6 angulaire

voix
-1

J'ai une liste de Person

class Person {
  name: string;
  birthdate: Date;
}

J'affiche avec succès cette liste comme ceci:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Birthdate</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor=let person of persons>
            <td>{{ person.name }}</td>
            <td>{{ person.birthdate }}</td>
        </tr>
    </tbody>
</table>

Maintenant , je voudrais rendre le champ en nameligne modifiable et pour rendre le champ birthdatemodifiable avec datepicker pop - up.
Je voudrais également besoin de validation et les modifications déclenchera un appel api web.
Quelle est la meilleure façon d'atteindre cet objectif?

Créé 19/09/2018 à 13:20
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
1

vous pouvez ajouter la saisie de texte ou datepicker en td comme celui-ci

dans le fichier html

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Birthdate</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let person of persons">
            <td><input type="text" (input)="onValueChange(person.name)" [(ngModel)]="person.name"/></td>
            <td><input type="date" [(ngModel)]="person.birthdate"/></td>
        </tr>
    </tbody>
</table>

ts

onValueChange(value:any){
  //this api call or whatever you need to do on value change
}

ou vous pouvez utiliser d' autres composants à base angulaires comme primeng ou grille ag

Créé 19/09/2018 à 13:32
source utilisateur

voix
1

Vous pouvez utiliser un ReactiveForm avec un formArray et utiliser la bibliothèque mydatepicker pour le datepicker. Les documentations sont bien décrits , mais si vous avez une question que je vais répondre dès que possible! Voici un bon tutoriel aussi: https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

Créé 19/09/2018 à 13:30
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more