Angular2 generates reloads instead of calling onSubmit ()

Question

Angular2 treats it as a normal form and does nothing:

<form (ngSubmit)="onSubmit(f.value, $event)" #f="ngForm">
<md-card-title>Settings</md-card-title>
<md-card-content>
  <p>
    <md-input [(ngModel)]="user.username" name="username" required placeholder="Username"
              #name="ngModel"></md-input>
  </p>
</md-card-content>
<md-card-actions>
  <button [disabled]="!f.form.valid" type="submit" md-raised-button color="accent">Save</button>
</md-card-actions>

I turned on disableDeprecatedForms()and provideForms()in your bootstrap file and the function of the release button works fine, but when I click on it does not work, but the site is reloaded ...

Answer 1

The onSubmit () method may cause a JavaScript error. Open your web browser developer tools and check for errors. In my case, I tried to set the value of the property without setter in the onSubmit () method, so when I execute JavaScript it throws an error and instead the default submit form action is executed and the page refreshes.

Answer 2

onSubmit . onSubmit