Angular 2에서 Enter 키를 누를 때 입력 유형 = "텍스트"값을 어떻게 제출합니까?

Angular 2 앱에 검색 상자를 만들고 'Enter'를 눌렀을 때 값을 제출하려고합니다 (양식에 버튼이 포함되지 않음).Angular 2에서 Enter 키를 누를 때 입력 유형 = "텍스트"값을 어떻게 제출합니까?

템플릿 테스트 목적으로 간단한 onSubmit 기능으로

<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이 경우에는 작동하지 않습니다. 그래서 이것을 해결할 수있는 '각도 2 방법'은 무엇입니까? (숨겨진 버튼과 같은 해킹 바람직하지 않고)

출처

2016-07-29 Koen De Couck

(keyup.enter)="methodInsideYourComponent()" 정상 HTML에서 귀하의 의견 태그

출처

2016-07-29 12:32:50 Godfather

니스! 나는 그것을

'으로 포장하여 작동 시키려고했지만, 당신의 방법은 훨씬 더 간결하고 간결합니다! –

. 고마워요. – user2180794

[Angular Docs] (https://angular.io/docs/ts/latest/guide/user-input.html#!#key-event-filtering-with-key-enter-)에도 언급되어 있습니다. . –

안에이 추가 입력 누르면 양식을 제출 <button type="submit" ></button> 또는 <input type="submit" />이 필요합니다. 이러한 요소는 CSS에 의해 숨길 수 있지만 양식 내에 있어야합니다. ng-submit은 보통 onsubmit 이벤트에 바인딩되어야하며 트리거 될 조건이 동일해야합니다.

또한 게시 한 코드에서 양식 요소가없고 입력 필드 만 있고 ng-submit 지시어는 입력 요소에 onsubmit JS 이벤트가 없으므로 양식에서만 작동합니다.

출처

2016-07-29 12:34:07

당신은 완벽하게하기 위해 형태 즉

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

출처

2016-07-29 13:08:50 Naveen

에 양식 태그 및 설정 ngSubmit 속성 내에서이 텍스트 상자를 넣을 수 있습니다,이 솔루션뿐만 아니라 나를 위해 일한 :

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

출처

2016-11-18 15:08:07

Angular 2에서 Enter 키를 누를 때 입력 유형 = "텍스트"값을 어떻게 제출합니까?

답변

관련 문제