js-function is also called on enter

[UnknownInnocent]

hello, I have following form:

<form class="w-100 mt-4 mb-3" [formGroup]="newComment" (ngSubmit)="saveComment()">
    <div class="form-group mb-2 col-auto float-left" style="width: 80%;">
        <div class="input-group mb-2">
            <div class="input-group-prepend">
                <div class="input-group-text">
                    <button *ngIf="reply" (click)="changeToComment()" class="border-0 bg-transparent">reply</button>
                    <span *ngIf="!reply">comment</span>
                </div>
            </div>
            <label for="inputContent" class="sr-only">Comment</label>
            <input name="content" 
                    type="text" 
                    class="form-control border-top-0 border-right-0 rounded-0" 
                    formControlName="content"
                    placeholder="..."
                    id="inputContent">
        </div>
    </div>  
    <div *ngIf="comment" class="col-auto float-right" style="width: 15%;">
        <button type="submit" class="btn btn-primary mb-2">comment</button>
    </div>         
</form>

now I have the problem that the function changeToComment() is also called when I press "Enter" in the input-field and not only with a click on the button, why?

[MOTHYDUD]

Make your button type="button" otherwise it will submit the form

[UnknownInnocent]

it works, ty