Benutzerdefinierte Methode einreichen in Form Komponentenbehälter

Question

Ich habe eine Komponente Angular meine Kopf- und Fußzeilen aller meiner Form wie folgt enthält:

<div class="layout vertical"> 
    <header class="layout horizontal center"> 
    <h2> {{enterData?.title}} </h2> 
    </header> 

    <!-- Form --> 
    <form [formGroup]="formName" #form="ngForm" (ngSubmit)="submit()" 
     class="layout vertical"> 
    <ng-content></ng-content> 

    </form> 

    <footer class="layout space-between horizontal">  
    <div class="buttons-footer-layout"> 
     <!-- buttons --> 
     <paper-button class="btn-cancel-alt" type="reset" (click)="close()" id="cancelInc">{{labels.BTN_ANNULER}} 
     </paper-button> 
     <paper-button class="btn-action" 
        [disabled]="!formName.valid || formName.pristine 
        (click)="submit()" 
        id="saveInc"> 
     {{labels.BTN_CREER}} 
     </paper-button> 
    </div> 
    </footer> 
</div> 

und der TS-Datei:

@Component({ 
     selector: 'enter-data-container', 
     templateUrl: './enter-data-container.component.html', 
     styleUrls: ['./enter-data-container.component.scss'] 
    }) 
    export class EnterDataContainerComponent { 
    @Input() enterData: EnterData<any>; 
    @Input() formName: FormGroup; 

    constructor(private store: Store<AppState>, 
        private location: Location) { 
     } 
    /** 
     * On submit du form 
     */ 
     submit() { 
    // Send Data to service 

    } 
    /** 
     * on click cancel 
     */ 
     close(): void {  
      this.location.back();  
     } 
    } 

In vielen Form Ich habe in meiner App die Submit immer gleich, aber manchmal ist es etwas anders. So möchte ich die Möglichkeit geben, die Submit-Funktion zu überschreiben, wenn es benötigt wird. Wie erreiche ich das mit Angular 2/4?

Answer 1

Verwenden $ Event.preventDefault()

<paper-button class="btn-cancel-alt" type="reset" (click)="close(); $event.preventDefault()" id="cancelInc">{{labels.BTN_ANNULER}} 
     </paper-button>