typescript - Angular 2 prevent input inside component from firing form submit outside of the component -

outside form:

<form #myform="ngform" (ngsubmit)="save(myform.value, myform.isvalid)">   <tags-input></tags-input> </form> 

tags input component template:

<input type="text" [(ngmodel)]="newtag" (keyup.enter)="addtag(newtag, $event)"> 

tags input component:

addtag(newtag: any, e: any) {    e.stoppropagation();   e.preventdefault(); } 

despite this, still fires submit in outer form.

how can prevent form submitting when press enter in input inside component?

i'm thinking there must way achieve eventemitter or something, have no idea how.

preventing keyup event not prevent submit event of form. 1 way solve raise flag on parent component. like:

parent component

<form #myform="ngform" (ngsubmit)="save(myform.value, myform.isvalid)">   <tags-input (enter)="onenter()"></tags-input> </form>  onenter() {   this.preventsave = true; }  save() {   if (!this.preventsave) {     // save   } } 

child component

@output() enter = new eventemitter();  addtag(newtag: any, e: any) {   this.enter.emit();   e.stoppropagation();   e.preventdefault(); }