Olá a todos,

Estou implementando meu formulário para adicionar comentários em uma foto, e estou implementando ele conforme abaixo:

<div *ngIf="(comments$ | async) as comments">
    <ul class="list-unstyled comment-list">
        <li *ngFor="let comment of comments">
            <a
                [routerLink]="['/user', comment.userName]"
                class="text-dark font-weight-bold mr-1">
                {{ comment.userName }}
            </a>
            <em>{{ comment.date | date:'dd-MM-yyyy HH:mm' }}</em>
            <p class="break-word mb-2">{{ comment.text }}</p>
        </li>
    </ul>
    <div class="mt-4">
        <form [formGroup]="commentForm">
            <div class="input-group">
                <textarea
                    class="form-control"
                    formControlName="comment"></textarea>
                <div class="input-group-append">
                    <button
                        (submit)="save()"
                        [disabled]="commentForm.invalid"
                        class="btn btn-primary pull-left" type="submit">
                        Publish
                    </button>
                </div>
            </div>
            <ap-vmessage
                *ngIf="commentForm.get('comment').errors?.maxlength"
                text="Maximum size allowed is 300">
            </ap-vmessage>
        </form>
    </div>
</div>

Note que estou usando o (submit)="save()" para submeter o formulário, porém, ao usar a aplicação e clicar no botão nada acontece, e quando digo nada é inclusive sem nenhum erro no console. Já se trocar o (submit) por (click) tudo funciona, porém, no console recebo um warning "Form submission canceled because the form is not connected".

Alguém saberia me explicar o que estou fazendo de errado?

PS: Estou importando o ReactiveFormModule no módulo do meu componente.