jessipearcy

<div class="input-group">
  <input
    type="email"
    id="email"
    placeholder="Email"
    formControlName="email"
  />
  <span class="alert" *ngIf="email.invalid && email.touched && !email.errors['existingCustomer'] && !email.value">Please enter an email address</span>
  <span class="alert" *ngIf="email.invalid && email.touched && email.errors['email']">Email address is invalid</span>
  <span class="alert" *ngIf="email.invalid && email.touched && email.errors['existingCustomer']">You've already signed up!</span>

jessipearcy

public existingCustomers = [
  'existingCustomer@gmail.com',
  'jessidevs@testEmail.com',
];

public signup = new FormGroup({
  firstName: new FormControl('', Validators.required),
  lastName: new FormControl('', Validators.required),
  email: new FormControl('', [
    Validators.required,

jessipearcy

<div class="input-group">
  <input
    type="email"
    id="email"
    placeholder="Email"
    formControlName="email"
  />
  <span class="alert" *ngIf="email.invalid && email.touched && !email.value">Please enter an email address</span>
  <span class="alert" *ngIf="email.invalid && email.touched && email.errors['email']">Email address is invalid</span>
</div>

jessipearcy

public signup = new FormGroup({
  firstName: new FormControl('', Validators.required),
  lastName: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email]),
  quantity: new FormControl('', Validators.required),
  message: new FormControl('', [Validators.required, Validators.minLength(10)]),
});

jessipearcy

<div class="input-group">
  <input
    type="text"
    id="firstName"
    placeholder="First Name"
    formControlName="firstName"
  />
  <span class="alert" *ngIf="firstName.invalid && firstName.touched">Please enter your first name</span>
</div>

jessipearcy

get firstName() {
  return this.signup.get('firstName');
}
get lastName() {
  return this.signup.get('lastName');
}
get email() {
  return this.signup.get('email');
}
get quantity() {

jessipearcy

public signup = new FormGroup({
  firstName: new FormControl('', Validators.required),
  lastName: new FormControl('', Validators.required),
  email: new FormControl('', Validators.required),
  quantity: new FormControl('', Validators.required),
  message: new FormControl('', Validators.required),
});

jessipearcy

class Validators {
  static min(min: number): ValidatorFn
  static max(max: number): ValidatorFn
  static required(control: AbstractControl): ValidationErrors | null
  static requiredTrue(control: AbstractControl): ValidationErrors | null
  static email(control: AbstractControl): ValidationErrors | null
  static minLength(minLength: number): ValidatorFn
  static maxLength(maxLength: number): ValidatorFn
  static pattern(pattern: string | RegExp): ValidatorFn
  static nullValidator(control: AbstractControl): ValidationErrors | null

jessipearcy

//...Code Omitted...
import { ActivatedRoute, Router } from '@angular/router';

//...Code Omitted...
export class HabitFormComponent implements OnInit {
  public habits: Habit[];
  public editingIndex: number;
  public editing = false;

//...Code Omitted...

jessipearcy

//...Code Omitted...
import { Router } from '@angular/router';

export class HabitFormComponent implements OnInit {
  //...Code Omitted...

  constructor(private router: Router) {}

  //...Code Omitted...