Assignment: Login screen with validation and reactive form

Useful Links

Angular Material Setup Docs:

https://material.angular.io/guide/getting-started

Angular Material Component Docs:

https://material.angular.io/components/categories

Angular Material Github Repo:

https://github.com/angular/material2

@angular/flex-layout Docs:

https://github.com/angular/flex-layout

Flexbox Guide:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox Video:

https://academind.com/learn/css/understanding-css/flexbox-basics-container

Template-Driven Forms

signup.component.html

<section class="signup-form">
    <form fxLayout="column" fxLayoutGap="10px" fxLayoutAlign="center center" #f="ngForm" (ngSubmit)="onSubmit(f)">
        <mat-form-field>
            <input
                type="email"
                matInput
                placeholder="Your email"
                ngModel
                name="email"
                email
                required>
            <mat-error>E-Mail is invalid.</mat-error>
        </mat-form-field>
        <mat-form-field hintLabel="Should be at least 6 characters long.">
            <input
                type="password"
                matInput
                placeholder="Your password"
                ngModel
                name="password"
                required
                minLength="6"
                #pwInput="ngModel">
            <mat-hint align="end"> {{ pwInput.value?.length }} / 6 </mat-hint>
        </mat-form-field>
        <mat-form-field>
            <input
                matInput
                placeholder="Your birthdate"
                ngModel
                name="birthdate"
                required
                [max]="maxDate"
                [matDatepicker]="picker">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>

        <mat-checkbox ngModel name="agree" color="primary" required>Agree to Terms and Conditions.</mat-checkbox>

        <button type="submit" color="primary" mat-raised-button [disabled]="f.invalid">Submit</button>
    </form>
</section>

signup.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {

  maxDate;

  constructor(private authService: AuthService) { }

  ngOnInit(): void {
    this.maxDate = new Date();
    this.maxDate.setFullYear(this.maxDate.getFullYear() - 18);
  }

  onSubmit(form: NgForm): void {
    this.authService.registerUser({
      email: form.value.email,
      password: form.value.password
    });
  }
}

signup.component.css

mat-form-field {
    width: 300px;
}

Reactive Forms

login.component.html

<section class="login-form">
    <form
        fxLayout="column"
        fxLayoutGap="10px"
        fxLayoutAlign="center center"
        [formGroup]="loginForm"
        (ngSubmit)="onSubmit()">
        <mat-form-field>
            <input
                type="email"
                matInput
                placeholder="Your email"
                formControlName="email">
            <mat-hint>Please enter your email</mat-hint>
            <mat-error>Invalid or missing email</mat-error>
        </mat-form-field>
        <mat-form-field>
            <input
                type="password"
                matInput
                placeholder="Your password"
                formControlName="password">
            <mat-hint>Please enter your password</mat-hint>
            <mat-error>Missing password</mat-error>
        </mat-form-field
        >
        <button type="submit" color="primary" mat-raised-button [disabled]="loginForm.invalid">Submit</button>

    </form>
</section>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loginForm: FormGroup;

  constructor(private authService: AuthService) { }

  ngOnInit(): void {
    this.loginForm = new FormGroup({
      email: new FormControl('', { validators: [Validators.required, Validators.email] }),
      password: new FormControl('', { validators: [Validators.required] })
    });
  }

  onSubmit(): void {
    console.log(this.loginForm);
    this.authService.login({
      email: this.loginForm.value.email,
      password: this.loginForm.value.password
    });
  }
}

login.component.css

mat-form-field {
    width: 300px;
}