Date validation so that no next date is selected angular

Question

I want to write aboute angular's datepicker I want to write date validation so that no next date is selected angular example: today is date 17/12/2020 you can pick date 17 or 16 or more than 17 but you can not pick date 18 or less than 17. I wanna know how to write in angular

html file:

<div class="form-group col-md-6">
  <label for="date">Date</label>
  <input type="date" formControlName="date" class="form-control" id="date" placeholder="date">
</div>

add-ticket.component.ts file

import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { TicketService } from 'src/app/services/ticket/ticket.service';
import Swal from 'sweetalert2/dist/sweetalert2.js';

@Component({
  selector: 'app-add-ticket',
  templateUrl: './add-ticket.component.html',
  styleUrls: ['./add-ticket.component.scss']
})
export class AddTicketComponent implements OnInit {
  public addTicketForm: FormGroup;

  constructor(
    public ticketService: TicketService,
    public fb: FormBuilder
  ) { }

  ngOnInit() {
    this.ticketService.getTicketsList();
    this.buildForm();
  }

  successNotification(){
    Swal.fire({
      text: 'Your ticket has been saved',
      icon: 'success',
    }).then((result) => {
      window.location.href = "./../ticket";
    })
  } 

  sources = [
    { name: 'website' },
    { name: 'Facebook' },
    { name: 'Line' },
    { name: 'Email' },
    { name: 'Telephone' },
    { name: 'Onsite' }
  ]

  types = [
    { name: 'info' },
    { name: 'consult' },
    { name: 'problem' },
    { name: 'add-ons' }
  ]

  prioritys = [
    { name: 'low' },
    { name: 'medium' },
    { name: 'high' }
  ]

  buildForm() {
    this.addTicketForm = this.fb.group({
      date: [''],
      source: [''],
      siteName: ['', [Validators.required]],
      maintenancePackage: ['', [Validators.required]],
      product: ['', [Validators.required]],
      module: [''],
      creater: ['', [Validators.required]],
      type: [''],
      subject: ['', [Validators.required]],
      priority: [''],
      description: [''],
      resolveDescription: [''],
    })
  }

  get date() {
    return this.addTicketForm.get('date');
  }

  get source() {
    return this.addTicketForm.get('source');
  }

  get siteName() {
    return this.addTicketForm.get('siteName');
  }

  get maintenancePackage() {
    return this.addTicketForm.get('maintenancePackage');
  }

  get product() {
    return this.addTicketForm.get('product');
  }

  get module() {
    return this.addTicketForm.get('module');
  }

  get creater() {
    return this.addTicketForm.get('creater');
  }

  get type() {
    return this.addTicketForm.get('type');
  }

  get subject() {
    return this.addTicketForm.get('subject');
  }

  get priority() {
    return this.addTicketForm.get('priority');
  }

  get description() {
    return this.addTicketForm.get('description');
  }

  get resolveDescription() {
    return this.addTicketForm.get('resolveDescription');
  }

  addTicketData() {
    this.ticketService.addTicket(this.addTicketForm.value);
  }
}

Answer 1

Try by providing min and max values in input date field, (min field is not mandatory)

<input type="date" formControlName="date" min="2020-12-12" max="2020-12-17" class="form-control" id="date" placeholder="date">

if you want to restrict by today's date

<input type="date" formControlName="date" min="2020-12-12" [max]="today" class="form-control" id="date" placeholder="date">

in ts

today = new Date().toJSON().split('T')[0]

you can skip min field if you don't want to give minimum date