是否可以使用包含位于父组件中的提交按钮的表单组件。角

Question

（我正在创建一个角度2项目。项目是它在模态组件中有一个表单）。我想在一个模态（父组件）中创建一个表单组件（3个子组件，每个组件都是表单组件）。

使用模态（父组件）的按钮完成表单组件（子组件）的切换/导航。所以基本上每个表单的提交事件都由模态父组件的相同按钮（下一个按钮）处理。我想基于我的验证禁用模态的下一个按钮（也是每个表单的提交按钮）。我一直试图弄清楚如何实施这一周，但我似乎无法找到任何解决方案。

Answer 1

尝试这样的事情：

@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();
}

您可以使用@Input停用/隐藏按钮，并使用@Output来处理点击次数。