使用ng-disabled无法禁用datepicker日期选择器问题求助

问题核心原因 #

你使用了AngularJS（1.x版本）的模板语法编写Angular（2.x及以上版本）的代码，二者指令并不兼容：

• ng-model是AngularJS的双向绑定指令，新版Angular不认
• ng-disabled是AngularJS的禁用属性指令，新版Angular不认

正确实现步骤 #

1. 首先在你的模块文件中导入FormsModule，这是Angular实现双向绑定的必要依赖：

// app.module.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 { }

2. 在组件类中声明绑定用的变量：

// app.component.ts 示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  checked = false;
}

3. 修改模板代码，使用新版Angular的语法：

<label>Click me to toggle: <input type="checkbox" [(ngModel)]="checked" /></label><br />
<input type="date" name="date" [disabled]="checked" />

语法说明 #

• 新版Angular双向绑定统一使用[(ngModel)]替代旧版AngularJS的ng-model
• 新版Angular的属性绑定直接用[属性名]的写法，所以禁用直接写[disabled]="checked"即可，不需要ng-前缀

内容的提问来源于stack exchange，提问作者s_om