Is it possible to have a form component with submit button located in the parent component. Angular

Question

(I'm creating an angular 2 project. The project is that it has a forms inside a modal component). I would like to create a form components (3 child components each of which are form component) inside a modal (the parent component).

Switching/navigation of the form components( child component ) is done using the buttons of the modal (parent component). So basically the submit event of each form are all handled by the same button (next button) of the modal parent component. I would like to disabled the next button of the modal (which is also the submit button of each form) base on my validation. I've been trying to figure out how to implement this for a week now but I can't seem to find any solution.

Answer 1

Try something like this:

@Component({
  template: `
    <button md-button [class.xs]="'mat-icon-button'" (click)="reset.emit()" [disabled]="!canReset">
      <md-icon>restore</md-icon>
      <span fxHide.xs i18n="button label">Reset</span>
    </button>

    <hr class="flex">

    <div class="inline-container" *ngIf="canDelete">
      <button md-button color="warn" #d [disabled]="!d._" (click)="delete.emit()">
        <md-icon>delete</md-icon>
        <span i18n="button label">Delete</span>
      </button>
      <md-slide-toggle color="warn" (change)="d._=!d._"></md-slide-toggle>
    </div>

    <button md-raised-button [class.xs]="'mat-icon-button'" color="accent" (click)="save.emit()">
      <md-icon>check</md-icon>
      <span fxHide.xs i18n="button label">Save</span>
    </button>`,
})
export class FormButtonsComponent {
  @Input() canReset: boolean;
  @Input() canDelete: boolean;
  @Output() delete: EventEmitter<any> = new EventEmitter();
  @Output() reset: EventEmitter<any> = new EventEmitter();
  @Output() save: EventEmitter<any> = new EventEmitter();
}

You can disable/hide buttons with @Inputs, and handle clicks with @Outputs.