Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular Template Driven Form Validation (Bootstrap) - Newsletter Signup
<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>
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');
}
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.