Même forme pour la création et l'édition de données Angular4
Ici est une forme avec ses deux-lié champs de saisie. L'objectif était de créer le même formulaire pour créer et modifier des données. Ce qui a été accompli, mais je suis assez sûr qu'il pourrait y avoir une meilleure façon de le faire (comme l'utilisation de AbstractControl caractéristiques). J'ai aussi manquer un correctif ici - si clickEdit()
être cliqué besoin de mettre à jour les valeurs d'un formulaire avec l'objet auquel l'utilisateur veut modifier. Merci pour toute l'aide et surtout des explications sur AbstractControl
et NgModel
..
<div>
<form (ngSubmit)="clicked ? onEditSubmit($event) : onRegisterSubmit($event)" [formGroup] = "form">
<div class="form-group">
<label>Full Name</label>
<input type="text" [(ngModel)]="fullname" formControlName="fullname" class="form-control" >
</div>
<div class="form-group">
<label>Username</label>
<input type="text" [(ngModel)]="username" formControlName="username" class="form-control" >
</div>
<div class="form-group">
<label>Email</label>
<input type="text" [(ngModel)]="email" formControlName="email" class="form-control" >
</div>
<div class="form-group">
<label>Password</label>
<input type="password" [(ngModel)]="password" formControlName="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary" [disabled]="!form.valid"> Submit </button>
</form>
</div>
<br>
<br>
<table border="2" class="table table-striped">
<tr>
<th>Full Name</th>
<th>Username</th>
<th>Email</th>
<th>Password</th>
<th>Delete</th>
<th>Edit</th>
</tr>
<div > </div>
<tr *ngFor="let user of userDetails; index as i">
<td>{{user.fullname}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.password}}</td>
<td><button (click)="userDelete()">X</button></td>
<td><button (click)="clickEdit(i)">Edit</button></td>
</tr>
</table>
Et
import { Component } from '@angular/core';
import { initializeApp, database } from 'firebase';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
fullname : string;
username : string;
email : string;
password : string;
clicked = false;
userDetails:Array<object>;
form;
ngOnInit() {
this.userDetails=[];
this.form = new FormGroup({
fullname : new FormControl("", Validators.required),
username : new FormControl("", Validators.required),
email : new FormControl("", Validators.required),
password : new FormControl("", Validators.required)
});
}
onRegisterSubmit(e){
let user = {
fullname : this.fullname ,
username : this.username,
email : this.email ,
password : this.password
}
this.userDetails.push(user);
this.clearInputFields(e);
}
editIndex = null;
clickEdit(i){
this.clicked = !this.clicked;
this.editIndex = i;
}
onEditSubmit(e) {
let editUser = {
fullname : this.fullname ,
username : this.username,
email : this.email ,
password : this.password
}
this.userDetails[this.editIndex] = editUser;
this.clearInputFields(e);
this.clicked = !this.clicked;
}
clearInputFields(e){
let all = e.target.querySelectorAll('input');
Object.keys(all).forEach(key => {
console.log(all[key].value = '');
});
}
}
OriginalL'auteur Julius Dzidzevičius | 2017-07-28
Vous devez vous connecter pour publier un commentaire.
Je voudrais faire quelques changements à votre formulaire.
ngModel
est totalement redondant ici que vous êtes en utilisant une forme réactive. Utiliser à la place et de supprimer tous les ngModel. L'objet que vous obtenez de la forme, est la mise en correspondanceuser
, de sorte que vous pouvez faire, c'est pousser la valeur est à la matrice.De sorte que votre modèle devrait ressembler à quelque chose comme ceci (raccourci, comme le reste du code):
Dans la construction de la forme que j'ai dans ce cas utilisé un champ caché, qui est également exclue de la forme de l'objet comme il est
disabled
. C'est une aide pour nous, alors nous pouvons distinguer si c'est une nouvelleuser
, ou si nous sommes dans l'édition d'unuser
. La valeur correspond à l'indice de lauser
à partir de votre tableau. Donc, si cette valeur existe, nous le savons, mise à jour de l'objet dans le tableau, si la valeur n'existe pas, nous allons pousser l'utilisateur à la matrice.Ceci peut être résolu par de nombreuses façons, mais au-dessus est une option.
Donc, d'après ce qui précède, nous pouvons modifier la
onRegisterSubmit
ressembler à ce qui suit:Lorsque l'on veut modifier un utilisateur, nous passons de l'indice et de l'utilisateur dans le modèle
Et puis, nous utilisons
setValue
(oupatchValue
) pour entrer dans le champs avec les valeurs existantes:Qui devrait le faire! Alors maintenant, nous pouvons voir combien nous pourrions simplifier votre code et de se débarrasser de certaines choses inutiles! 🙂
Bien sûr, laissez-moi savoir si vous rencontrez des problèmes, et je suis heureux de vous aider. J'ai testé le code ci-dessus, alors il devrait fonctionner 🙂
OriginalL'auteur AJT_82