¿Cómo restringir al usuario para que ingrese la fecha manualmente en el campo de fecha usando AngularJS?

En este artículo, veremos cómo restringir al usuario para ingresar la fecha manualmente en el campo de fecha.

Acercarse:

• Primero, necesitamos escribir el código para la entrada y debemos dar su tipo como la fecha en el archivo HTML.
• Luego, para restringir que el usuario ingrese la fecha manualmente, podemos usar el evento onkeydown.
• En el evento onkeydown, debemos devolver falso para que podamos restringir al usuario para que ingrese la fecha manualmente.
• Para lograr el objetivo anterior, necesitamos escribir y funcionar y devolver falso en el archivo ts.
• Como restringimos al usuario para ingresar la fecha normalmente, el usuario solo puede ingresar la fecha del calendario.
• Después de completar los pasos anteriores, guarde y ejecute el proyecto para ver el resultado.

Implementación de código:

aplicación.componente.html:

<h1>
    Restricting the user to enter 
    date manually in date field
</h1>
  
<label for="vote">Select a date:</label>
  
<input type="date" id="vote" name="vote" 
    (keydown)="disableDate()">

aplicación.componente.ts:

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
  
export class AppComponent  {
    
  disableDate(){
      return false;
  }  
}

aplicación.módulo.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
  
@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Producción: