상위 구성 요소에 제출 단추가있는 양식 구성 요소를 가질 수 있습니까? 각도

Question

(저는 각도 2 프로젝트를 만들고 있는데,이 프로젝트는 모달 구성 요소 안에 폼이 있음을 나타냅니다). 모달 (모체 구성 요소) 안에 폼 구성 요소 (폼 구성 요소 인 각각 3 개의 하위 구성 요소)를 만들고 싶습니다.

전환/양식 구성 요소 (하위 구성 요소) 모달 (부모 요소)의 버튼을 사용하여 수행됩니다의 탐색. 따라서 기본적으로 각 양식의 제출 이벤트는 모달 부모 구성 요소의 동일한 버튼 (다음 버튼)으로 처리됩니다. 내 모달 검증의 다음 단계 인 모달 (각 양식의 제출 단추이기도 함)을 비활성화하고 싶습니다. 나는 이것을 1 주일 동안 구현하는 방법을 알아 내려고 노력했지만 어떤 해결책도 찾을 수없는 것 같습니다. 이 같은

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들과 클릭을 처리 할 수 ​​있습니다.