如何限制用户使用 AngularJS 在日期字段中手动输入日期？

在本文中，我们将看到如何限制用户在日期字段中手动输入日期。

方法：

• 首先，我们需要编写用于输入的代码，我们需要在 HTML 文件中将其类型指定为日期。
• 然后为了限制用户手动输入日期，我们可以使用 onkeydown 事件。
• 在 onkeydown 事件中我们需要返回 false 以便我们可以限制用户手动输入日期。
• 为了达到上述目的，我们需要在ts文件中编写和函数并返回false。
• 由于我们限制用户正常输入日期，因此用户只能输入日历中的日期。
• 完成上述步骤后，保存并运行项目以查看输出。

代码实现：

app.component.html：

HTML

    Restricting the user to enter 
    date manually in date field

  
Select a date:
  

app.component.ts:

Javascript

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

app.module.ts:

Javascript

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 { }

输出：