Forms & Validations

form.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Validators, FormBuilder, FormControl, FormGroup } from "@angular/forms";

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})

export class FormComponent implements OnInit {

  form: FormGroup;


  ngOnInit() {
    this.form = new FormGroup({
      medium: new FormControl('Movies'),
      name: new FormControl('', Validators.compose([
        Validators.required,
        Validators.pattern('[\\w\\-\\s\\/]+')
      ])),
      category: new FormControl(''),
      year: new FormControl(''),
      text: new FormControl('', this.yearValidator),
    });
 }

  yearValidator(control) {
    if (control.value.trim().length === 0) {
      return null;
    }
    let year = parseInt(control.value);
    let minYear = 1900;
    let maxYear = 2100;
    if (year >= minYear && year <= maxYear) {
      return null;
    } else {
      return { 'year': true }
    }
  }
  
  onSubmit(mediaItem) {
    console.log(mediaItem);
  }                                          
}

form.component2.ts

import { Component, OnInit, Input } from '@angular/core';
import { Validators, FormBuilder, FormControl, FormGroup } from "@angular/forms";

import { MediaItemService } from "../../media-item.service";

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})

export class FormComponent implements OnInit {

  formGroup: FormGroup;

  constructor(private formBuilder: FormBuilder, private mediaItemService: MediaItemService) { }

  ngOnInit() { 

    this.formGroup = this.formBuilder.group({
      medium: this.formBuilder.control('Movies'),
      name: this.formBuilder.control('', Validators.compose([
        Validators.required,
        Validators.pattern('[\\w\\-\\s\\/]+')
      ])),
      category: this.formBuilder.control(''),
      year: this.formBuilder.control(''),
      text: this.formBuilder.control('', this.yearValidator),
    })

  }

  onSubmit(mediaItem) {
    this.mediaItemService.add(mediaItem);
  }
}

media-item.service.ts

export class MediaItemService {

    get() {
        return this.mediaItems;
    }

    add(mediaItem) {
        this.mediaItems.push(mediaItem);
    }

    delete(mediaItem) {
        let index = this.mediaItems.indexOf(mediaItem)
        if (index >= 0) {
            this.mediaItems.splice(index, 1)
        }
    }

    mediaItems = [
        {
            id: 1,
            name: "",
            medium: "",
            category: "",
            year: 2018,
            watchedOn: null,
            isFavorite: false
        },
        {
            id: 2,
            name: "",
            medium: "",
            category: "",
            year: 2012,
            watchedOn: null,
            isFavorite: false
        }
    ]
}