Açısal 2'de, enter tuşuna basıldığında giriş tipi = "metin" değerini nasıl gönderirim?

Question

Angular 2 uygulamamda bir arama kutusu yapıyorum, 'Enter' düğmesine basarak değeri göndermeye çalışıyorum (form bir düğme içermiyor).

Şablon test amaçlı basit onSubmit fonksiyonla

<input type="text" id="search" class="form-control search-input" name="search" placeholder="Search..." [(ngModel)]="query" (ngSubmit)="this.onSubmit(query)"> 

...

export class HeaderComponent implements OnInit { 
    constructor() {} 

    onSubmit(value: string): void { 
    alert('Submitted value: ' + value); 
    } 
} 

ngSubmit bu durumda çalışmak için görünmüyor. Peki bunu çözmek için 'Açısal 2 yol' nedir? (Gizli düğmeler gibi kesmek Tercihen olmadan)

Answer 1

(keyup.enter)="methodInsideYourComponent()" Normal HTML'de girişinizi etiketi

Answer 2

içinde bu ekleme girdiğiniz basıldığında formu göndermek için <button type="submit" ></button> ya <input type="submit" /> bir ihtiyaç. Bu elemanlar css tarafından gizlenebilir, ancak formun içinde mevcut olmalıdır. ng-submit, normal onsubmit etkinliğine bağlı olmalı ve tetiklenecek aynı koşullara sahip olmalıdır.

Ayrıca, gönderdiğiniz koddan, yalnızca giriş alanı ve ng-submit yönergesine sahip bir form öğeniz yoktur, çünkü giriş öğelerinin hiçbiri onsubmit JS olayı olmadığı için formlarla çalışır.

Answer 3

Sen Bütünlük adına forma yani

<form (ngSubmit)="YouMethod()"> 
    <input type="text" class="form-control input-lg" /> 
</form> 

Answer 4

bir form etiketi ve set ngSubmit özelliği içinde bu metin kutusu koyabilirsiniz, bu çözüm de benim için çalıştı:

<form (keydown)="keyDownFunction($event)"><input type="text" /></form>