Odoslanie v vlastnej Angular tlačidlovej komponente neodosiela formulár

Extrahoval som tlačidlo odoslať do samostatnej komponenty. Teraz sa formulár neodosiela/funkcia odoslania sa už nevolá, pretože ngSubmit sa nespúšťa.

<form [formGroup]='form' (ngSubmit)='submit(form.value)'>
   ...
   <app-submit-button></app-submit-button>
</form>

Problém je v tom, že tlačidlo v mojej vlastnej komponente app-submit-button spúšťa volanie funkcie pri kliknutí. Udalosť odoslania sa už ďalej neprenáša do rodičovskej komponenty, a preto sa jej funkcia odoslania nevykoná. Avšak, keď odstránim (click)='submit()' z dcérskej komponenty, odoslanie formulára funguje.

<ng-container [ngSwitch]='state'>
  <button *ngSwitchCase='buttonState.Idle' (click)='submit()'
    type='submit'>{{idleText}}</button>
  ...
</ng-container>

Skúšal som to s type='submit' aj bez neho na app-submit-button a na samotnom tlačidle.

Podarilo sa mi to rozbehnúť s

<app-submit-button (click)='submit(form.value)'></app-submit-button>

a odstránením ngSubmit. Chcel by som vedieť, či je to správny spôsob alebo či sa to správa inak ako použitie ngSubmit.

Odpoveď č. 1

Myslím, že by ste nemali vytvárať samostatnú komponentu iba pre tlačidlo. Problém je v tom, že nemôžete preniesť udalosť z rodiča na dieťa. Obe funkcie submit sú odlišné, pretože patria rôznym triedam (jedna je v rodičovskej komponente a druhá v dieťaťovej). Môžete buď vytvoriť udalosť vo vašej komponente app-submit-button a vyvolať udalosť pri kliknutí na tlačidlo. Takto vo vašom TypeScript súbore app-submit-button.

@Output()
submitEvent = new EventEmitter<>();
submit(): void {
submitEvent.emit();
}

potom spracujte udalosť v html súbore rodičovskej komponenty takto

<app-submit-button (submitEvent)="submit(form.value)"></app-submit-button>

Spustí sa udalosť v detskej komponente a rodič bude na túto udalosť reagovať. Napriek tomu je zlé vytvárať odlišnú komponentu len pre tlačidlo odoslania. Mali by ste tlačidlo použiť priamo vo formulári bez použitia dieťaťa. Dúfam, že to pomôže. Šťastné kódovanie ;-)