title: Angular Capure and Submit Reactive form data in Child Component without postback
body: <p>I have an parent component and I have a child component.  My child component has a reactive form.  I would like to capture some input from the child form and submit it.  However, whenever the form is inside a child component (as opposed to just being inside a parent), the submit function does a postback.  The same exact component works fine if it is standalone and not a child to another component.  I'm somewhat new to angular so I feel like there is some standard way of accomplishing this that I'm not aware of.</p>
  <p>My project is an angular ionic project, but that should have nothing to do with it.  Also, I was initially trying to use this child component (AdditemComponent) as an ionic modal and I was experiencing the same exact issue where the form post was doing a postback to the querystring instead of just calling the onSave method.</p>
  <p>My goal is to capture the data in the child component and process and submit the data in the child component.  This would allow me to just drop it wherever I need it.</p>
  <p>Parent.ts:</p>
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { AdditemComponent } from 'src/app/competitions/additem/additem.component'
  
  @Component({
    selector: 'app-settings',
    templateUrl: './settings.page.html',
    styleUrls: ['./settings.page.scss'],
  })
  export class SettingsPage implements OnInit {
  
    constructor(){ }
  
    ngOnInit(){ }
  
  }
  </code></pre>
  <p>Parent.html</p>
  <pre><code>&lt;ion-header&gt;
    &lt;ion-toolbar&gt;
      &lt;ion-title class=&quot;ion-text-center&quot;&gt;Settings&lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
    &lt;app-additem&gt;&lt;/app-additem&gt;  
  &lt;/ion-content&gt;
  </code></pre>
  <p>Child.ts</p>
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { ModalController } from '@ionic/angular';
  import { FormGroup, FormBuilder } from '@angular/forms';
  
  
  @Component({
    selector: 'app-additem',
    templateUrl: './additem.component.html',
    styleUrls: ['./additem.component.scss'],
  })
  export class AddplayerComponent implements OnInit {
  
    @Input() selectedResult;
    private newItemForm : FormGroup;
    private teams:[];
  
    constructor(
      private modalCtrl: ModalController,
      private formBuilder: FormBuilder,
      private dataservice
    ) { 
      this.newItemForm = this.formBuilder.group({
        fname: [''],
        lname: [''],
        shortname: [''],
        team: ['']
      })
    }
  
  
    ngOnInit() {
    }
  
    onSave() {
      console.log('captured form data', this.newItemForm);
    }
  
    onCancel() {
      this.modalCtrl.dismiss(null, 'cancel');
    }
  
  }
  </code></pre>
  <p>Child.html</p>
  <pre><code>&lt;ion-item class=&quot;header&quot;&gt;
    &lt;p&gt;Add New Item&lt;/p&gt;
  &lt;/ion-item&gt;
  
  &lt;form [formGroup]=&quot;newItemForm&quot; (ngSubmit)=&quot;onSave()&quot;&gt;
    &lt;ion-item&gt;
      &lt;ion-label&gt;First Name&lt;/ion-label&gt;
      &lt;ion-input type=&quot;text&quot; formControlName=&quot;fname&quot;&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
      &lt;ion-label&gt;Last Name&lt;/ion-label&gt;
      &lt;ion-input formControlName=&quot;lname&quot;&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
      &lt;ion-label&gt;Short Name&lt;/ion-label&gt;
      &lt;ion-input formControlName=&quot;shortname&quot;&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
      &lt;ion-label&gt;Team&lt;/ion-label&gt;
      &lt;ion-select formControlName=&quot;item&quot;&gt;
        &lt;ion-item *ngFor=&quot;let item of items&quot;&gt;
          &lt;ion-select-option [value]=&quot;item.itemId&quot;&gt;{{item.itemName}}&lt;/ion-select-option&gt;
        &lt;/ion-item&gt;
      &lt;/ion-select&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
      &lt;ion-button color=&quot;primary&quot; type=&quot;submit&quot; [disabled]=&quot;!newItemForm.valid&quot;&gt;Submit&lt;/ion-button&gt;
      &lt;ion-button color=&quot;danger&quot; (click)=&quot;onCancel()&quot;&gt;Cancel&lt;/ion-button&gt;
    &lt;/ion-item&gt;
  &lt;/form&gt;
  </code></pre>