Angular Template Driven Form Validation (Bootstrap) - Newsletter Signup

newsletter.html

<form #newsletterForm="ngForm" (ngSubmit)="newsletterForm.form.valid && onSubmit(newsletterForm)">
  
  <div class="form-group">
    <label>Your Email Address</label>
    <input type="email" name="email" class="form-control" [(ngModel)]="user.email" #email="ngModel"
      [ngClass]="{ 'is-invalid': newsletterForm.submitted && email.invalid }" required>
    <div class="invalid-feedback" *ngIf="newsletterForm.submitted && email.invalid">
      <p *ngIf="email.errors.required">*Email address is required</p>
    </div>
  </div>

  <div class="form-group">
    <button class="btn btn-danger btn-block">Signup</button>
  </div>
  
</form>

newsletter.ts

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import User from 'src/app/models/User';
import { ApiProvider } from '../../services/http';

@Component({
  selector: 'newsletter-signup',
  templateUrl: 'newsletter.html',
  styleUrls: ['newsletter.scss'],
})
export class NewsletterSignup {
  user: new User('');

  constructor(public router: Router, private UsersProvider:ApiProvider) {}

  onSubmit(form: NgForm) {
    const email = form.value.email;
    this.UsersProvider.post('/signup', {email: email}).then((result) =>{
      if(result.ok){
        this.router.navigateByUrl('/confirmation');
      }
    });
  }
}