是否可以在父组件中拥有一个带有提交按钮的表单组件。角

Question

（我正在创建一个 Angular 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();
}

您可以使用@Inputs 禁用/隐藏按钮，并使用@Outputs 处理点击。