2
votes

Comment soumettre un formulaire réactif depuis l'extérieur du formulaire [soumission en cliquant sur les boutons Enregistrer ou mettre à jour en dehors du formulaire]

Je travaille sur des formulaires réactifs dans angular 7 et je dois appeler submit à partir d'un bouton en dehors du formulaire.

<input type="button" form="ngForm"  class='Button' value="Save" (click)="detailForm.ngSubmit.emit('Save')" />

<input type="button" form="ngForm"  class='Button' value="Update" (click)="detailForm.ngSubmit.emit('Update')" />

<form [formGroup]="gDetailForm" (ngSubmit)="onSubmit(flag)" >
    </form>

Cette fonction fonctionne correctement.

Maintenant, je dois soumettre le formulaire à partir de plusieurs boutons, c'est-à-dire

si l'utilisateur clique sur le bouton Enregistrer, le formulaire doit être soumis et enregistré
si l'utilisateur clique sur le bouton Mettre à jour, le formulaire doit être soumis et mis à jour

Pour cela, je souhaite passer un drapeau 'Enregistrer' ou 'Mettre à jour' de

<input type="button" form="ngForm"  class='Button' value="Save" (click)="detailForm.ngSubmit.emit()" />

<form [formGroup]="gDetailForm" (ngSubmit)="onSubmit()" >
</form>

Mais je n'ai pas pu soumettre le formulaire avec le ' Enregistrer l'indicateur '/' Mettre à jour '. Comment pourrais-je passer un paramètre des boutons Enregistrer et Mettre à jour en dehors du formulaire à ma fonction d'envoi.

Toute suggestion fructueuse serait très appréciée.

angular angular-reactive-forms

3 commentaires

fournir un exemple de stackblitz

Utilisez-vous des formulaires basés sur des modèles ou réactifs? Je ne comprends pas pourquoi vous avez à la fois un formGroup et un ngForm . Y a-t-il une raison pour laquelle vous ne pouvez pas simplement appeler onSubmit () à partir des boutons, en passant les indicateurs requis?

J'utilise des formulaires réactifs et j'ai édité mon code.

3 Réponses :

2
votes

Essayez ceci:

HTML:

onSubmit(formValue:any, type:string) {
 /// your code
}

TS:

<button (click)="onSubmit(detailForm.value,'save')">Submit</button>
<button (click)="onSubmit(detailForm.value,'update')">Update</button>

2 commentaires

Comment pourrais-je identifier Enregistrer / Mettre à jour

Dans ce cas, le formulaire serait marqué comme soumis ou non?

5
votes

Utilisez type = "submit" à la place de type = "button" , ou si vous souhaitez utiliser en dehors du formulaire.

<input type="submit" form="ngForm" (click)="onSubmit(gDetailForm.value, 'save')"/>
<input type="submit" form="ngForm" (click)="onSubmit(gDetailForm.value, 'update')"/>
<form id="myForm" [formGroup]="gDetailForm">
    <input type="text" name="name"/>
</form>

1 commentaires

Dans votre cas, l'indicateur soumis par le formulaire est toujours faux et d'autres indicateurs tels que invalide, sale, tactile, etc. sont tous définis par défaut.

1
votes

Essayez ceci, cela fonctionne pour moi:

en HTML:

onSubmit(isPublished: string, formId: any) {
 console.log(isPublished); //Save or Update
  if (this.gDetailForm.valid) {
   // enter code here
  }
}

dans component.ts:

<input type="button" form="ngForm"  class='Button' value="Save" (click)="detailForm.ngSubmit.emit('Save')" />

<input type="button" form="ngForm"  class='Button' value="Update" (click)="detailForm.ngSubmit.emit('Update')" />

<form [formGroup]="gDetailForm" (ngSubmit)="onSubmit($event, detailForm)" id="ngForm" #detailForm="ngForm">
</form>

Démo de travail

4 commentaires

Dans votre cas, la validation n'est pas vérifiée.

vérifier avec this.gDetailForm.valid

Je l'ai vérifié en utilisant this.gDetailFirm.invalid mais le problème est que le contrôle invalide n'est pas mis en évidence, c'est-à-dire msg d'erreur sous le contrôle ou la bordure rouge du contrôle.

essayez avec devrait être obligatoire