Angular 2 : Input error

Question

I'm working on a project in which a search feature has been implemented. The input element looks like this :

<input #input type="text" name="query" class="form-control" id="nav-input" (ngModelChange)="onquery($event)"
           [(ngModel)]="searchdata.query" autocomplete="off" (keypress)="onEnter($event)">

onEnter(event: any) {
    if (event.which === 13) {
      this.displayStatus = 'hidebox';
      event.target.blur();
      this.submit();
    }

submit() {
    if (this.searchdata.query.toString().length !== 0) {
      if (!this.router.url.toString().includes('/search')) {
        this.router.navigate(['/search'], {queryParams: this.searchdata});
      }

On typing a query and hitting enter key, it shows error in console:

Form submission canceled because the form is not connected

I'm not able to figure out, how to solve this issue. It will be great if someone can help me out. :)

I suppose that when you press enter you are triggering the form submit. Have you checked that? — crash
– crash, Commented Jun 28, 2017 at 7:57
You are not giving us enough code. Please provide the whole form and whole submit method — Fredrik Lundin Grande
– Fredrik Lundin Grande, Commented Jun 28, 2017 at 8:03
please update the code with the whole <form> not just the <input> — crash
– crash, Commented Jun 28, 2017 at 8:21
@crash I have not used <form> element, just <input> element inside div tag. — Harshit
– Harshit, Commented Jun 28, 2017 at 8:23
@FredrikLundin I have not used form element. Just input inside div tag. And submit() is with whole code. :) — Harshit
– Harshit, Commented Jun 28, 2017 at 8:28

crash · Accepted Answer · 2017-06-28 08:28:53Z

1

Adding event.preventDefault() in the onEnter function should solve the problem since it is maybe trying to send a non-existing form.

answered Jun 28, 2017 at 8:28

crash

4,5829 gold badges36 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul Singh · Accepted Answer · 2017-06-28 08:09:22Z

0

change the name of function onEnter() from your template and your component. use any other name not this.

answered Jun 28, 2017 at 8:09

Rahul Singh

3411 silver badge6 bronze badges

1 Comment

Rahul Singh Over a year ago

i think there might be any onEnter events in html or js. not sure about this.

Collectives™ on Stack Overflow

Angular 2 : Input error

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related