Désolé pour mes questions, je suis très nouveau avec angulaire et je suis tellement perdu avec cette chose.
Je dois faire fonctionner mes utilisateurs. Je dois donc cliquer sur Modifier et avoir le même formulaire que Créer mais peuplé avec les informations des utilisateurs. P>
pouvez-vous m'aider à faire fonctionner la fonction. P>
mise à jour: p>
Je mettez à jour ma nouvelle version sans le NGModel, Je veux utiliser PatchValue (), mais je ne sais pas où et qu'est-ce que vous devez enregistrer le nouveau type de données par l'utilisateur et mettre à jour le composant parent P>
HTML P>
constructor(private formBuilder: FormBuilder, private userService: UserService, public dialog: MatDialog, public thisDialogRef: MatDialogRef<EditUserDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.selectedUser = data;
this.form = this.formBuilder.group({
f_name: [this.selectedUser.name, Validators.compose([Validators.required, Validators.maxLength(100)])],
m_name: [this.selectedUser.m_name, Validators.compose([Validators.maxLength(100)])],
l_name: [this.selectedUser.l_name, Validators.compose([Validators.required, Validators.maxLength(100)])],
email: [this.selectedUser.email, Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$')])]
});
}
isFieldInvalid(field: string) {
return (
(!this.form.get(field).valid && this.form.get(field).touched) ||
(this.form.get(field).untouched && this.formSubmitAttempt)
);
}
onUpdate() {
this.form.patchValue({
f_name: this.form.value.f_name ,
m_name: this.form.value.m_name,
l_name: this.form.value.l_name,
email: this.form.value.email
});
console.log(this.form.value); // the log is what I want , but How update my parent component table ?
}
3 Réponses :
Depuis que vous utilisez des formes réactives, vous pouvez utiliser les noms de formulaire pour remplir les champs d'entrée comme vous le souhaitez, par exemple
dans votre Donc, si vous n'êtes pas en mode édition, le champ sera vide en tant que composant.ts d'abord, déterminez si vous êtes en mode édition ou pas alors vous pouvez faire quelque chose comme ceci: si si la condition échoue.
Si vous souhaitez utiliser le même composant pour enregistrer les détails de l'utilisateur et modifier les détails de l'utilisateur. Vous devez créer deux itinéraires en utilisant le même composant. Et si vous utilisez Modifier la route, juste un code ci-dessous.
const user = {
f_name: 'Test First Name',
m_name: 'Test Middle Name',
l_name: 'Test Last Name',
email: 'Test Email',
}
this.form.patchValue(user);
Je mettez à jour mon code, pouvez-vous m'aider et me montrer ce que faire et où?
Non ce n'est pas le même composant, j'ai une bonne console.log sous l'éditionComponce mais je ne sais pas comment le transmettre au parent
Pourriez-vous créer une démo de Stackblitz afin que je puisse mieux vous aider?
J'ai trop de données dans mon application, si je fais une démo, j'ai 4 heures de taper pour taper
Je ne suis pas sûr que cela aidera mais, Une autre façon de définir une valeur d'un contrôle de formulaire sous une forme réactive est la suivante:
EditMethod()
{
this.form.get("formControlName").setValue("the value you get from your back end");
}