Refreshes the page when the button is clicked. What is the reason?

Question

Angular

I am writing a simple form in Typescript & Angular 2. The problem is this: after filling in the input and pressing the button, the page reloads. The result is not saved, the task is not added to Todo.

import { Component } from '@angular/core';


class Todo {  
    constructor(public title: string, 
                public completed: boolean = false) {}
}

const todos = [
    {
        title: `Изучить JavaScript`,
        completed: true
    },
    {
        title: `Изучить Angular 2`,
        completed: false
    },
    {
        title: `Написать приложение`,
        completed: false
    }
];

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html'
    styleUrls: ['app.component.css']
})
 export class AppComponent {
     title = 'Angular 2Do';
     todos: Todo[] = todos;
     newTodoTitle: string = '';

    create() {        
        let todo: Todo = new Todo(this.newTodoTitle);
        
        this.todos.push(todo);
        this.newTodoTitle= '';
    }

     toggle(todo: any) {
         todo.completed=!todo.completed;
     }
    
     delete(todo: any) {
         let index = this.todos.indexOf(todo);
         
         if (index > -1) {
             this.todos.splice(index, 1);
         }
     }
 }
<code lang="html">
<header>
    <img src="img/angular.svg" />
    <h1>{{ title }}</h1>
</header>

<main>
    <form class="todo-form" (ngSubmit)="create(); todoForm.reset()" #todoForm="ngForm">
        <input type="text" name="title" [(ngModel)]="newTodoTitle" placeholder="Что нужно сделать?" required>
        <button type="submit" [disabled]="todoForm.form.invalid">Добавить</button>
    </form>

    <section class="todo-list" *ngIf="todos.length">
        <div class="todo-item" *ngFor="let todo of todos" [class.completed]="todo.completed">

            <button class="checkbox icon" (click)="toggle(todo)">
                        <i class="material-icons">{{ todo.completed ? 'check_box' : 'check_box_outline_blank' }}</i>
                    </button>

            <span class="title">{{ todo.title }}</span>

            <div class="actions">
                <button class="delete icon" (click)="delete(todo)">
                            <i class="material-icons">delete</i>
                        </button>
            </div>
        </div>
    </section>

</main>
<code lang="javascript">
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
    
}
<code lang="javascript">
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
platform.bootstrapModule(AppModule);
</code>
</code>

</code>

Answer 1

htmlbook.ru/html/form/method
the form has a get method by default