是否有可能在父組件中有一個帶有提交按鈕的表單組件。 Angular

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 S手點擊。