Est-il possible de soumettre un formulaire qui n'a pas de bouton d'envoi (en appuyant sur Entrée) exemple:
<form [ngFormModel]="xxx" (ngSubmit)="xxxx()">
<input [(ngModel)]="lxxR" ngControl="xxxxx"/>
</form
Réponses:
peut-être que vous ajoutez keypress
ou keydown
aux champs de saisie et attribuez l'événement à la fonction qui effectuera la soumission lorsque vous cliquerez sur Entrée
votre modèle ressemblerait à ceci
<form (keydown)="keyDownFunction($event)">
<input type="text" />
</form
Et vous travaillez dans votre classe ressemblerait à ceci
keyDownFunction(event) {
if (event.keyCode === 13) {
alert('you just pressed the enter key');
// rest of your code
}
}
Vous pouvez également ajouter (keyup.enter)="xxxx()"
Éditer:
<form (submit)="submit()" >
<input />
<button type="submit" style="display:none">hidden submit</button>
</form>
Pour utiliser cette méthode, vous devez avoir un bouton d'envoi même s'il n'est pas affiché "Merci pour la réponse de Toolkit "
Ancienne réponse:
Oui, exactement comme vous l'avez écrit, sauf que le nom de l'événement est (submit)
au lieu de (ngSubmit)
:
<form [ngFormModel]="xxx" (submit)="xxxx()">
<input [(ngModel)]="lxxR" ngControl="xxxxx"/>
</form>
Je préfère (keydown.enter)="mySubmit()"
car il n'y aura pas de saut de ligne si le curseur était quelque part dans un <textarea>
mais pas à sa fin.
Cette façon est bien simple ...
<form [formGroup]="form" (keyup.enter)="yourMethod(form.value)">
</form>
Utilisez toujours keydown.enter au lieu de keyup.enter pour éviter les retards.
<textarea [(ngModel)]="textValue" (keydown.enter)="sendMessage();false" ></textarea>
et fonction à l'intérieur de component.ts
textValue : string = '';
sendMessage() {
console.log(this.textValue);
this.textValue = '';
}
ajoutez ceci dans votre balise d'entrée
<input type="text" (keyup.enter)="yourMethod()" />
(keyup.enter)="methodname()"
cela devrait fonctionner et déjà mentionné dans de nombreuses réponses, mais cela devrait être présent sur la balise de formulaire et non sur le bouton.
l'ajout d'un bouton d'envoi invisible fait l'affaire
<input type="submit" style="display: none;">
Ajoutez simplement (keyup.enter)="yourFunction()"
J'espère que cela peut aider quelqu'un: pour une raison quelconque, je n'ai pas pu suivre à cause du manque de temps, si vous avez un formulaire comme:
<form (ngSubmit)="doSubmit($event)">
<button (click)="clearForm()">Clear</button>
<button type="submit">Submit</button>
</form>
lorsque vous appuyez sur le Enter
bouton, la clearForm
fonction est appelée, même si le comportement attendu était d'appeler la doSubmit
fonction. Changer le Clear
bouton en <a>
tag a résolu le problème pour moi. J'aimerais toujours savoir si c'est prévu ou non. Cela me semble déroutant
Si vous souhaitez inclure les deux plus simples que ce que j'ai vu ici, vous pouvez le faire simplement en incluant votre bouton dans le formulaire.
Exemple avec une fonction envoyant un message:
<form>
<mat-form-field> <!-- In my case I'm using material design -->
<input matInput #message maxlength="256" placeholder="Message">
</mat-form-field>
<button (click)="addMessage(message.value)">Send message
</button>
</form>
Vous pouvez choisir entre cliquer sur le bouton ou appuyer sur la touche Entrée.
Si vous voulez inclure les deux - accepter lors de l'entrée et accepter sur cliquer puis faire -
<div class="form-group">
<input class="form-control" type="text"
name="search" placeholder="Enter Search Text"
[(ngModel)]="filterdata"
(keyup.enter)="searchByText(filterdata)">
<button type="submit"
(click)="searchByText(filterdata)" >
</div>