Блог

Я хочу написать о выборе даты в angular Я хочу написать проверку даты, чтобы следующая дата не была выбрана angular пример: сегодня дата 17/12/2020 вы можете выбрать дату 17 или 16 или больше 17, но вы не можете выбрать дату 18 или меньше 17. Я хочу знать, как писать в angular

html-файл:

 <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

 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);
  }
}
 

Попробуйте указать минимальные и максимальные значения в поле даты ввода (поле min не является обязательным)

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

если вы хотите ограничить сегодняшней датой

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

в ts

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

вы можете пропустить min поле, если не хотите указывать минимальную дату

Вы могли бы добиться этого, просто установив max атрибут input тега.

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

Поскольку вы используете Angular, вы можете связать его следующим образом [max]='(new Date).toISOString().split("T")[0]'