如何使用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：

Java脚本

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：

Java脚本

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

输出：