ng-disabled 不会禁用日期选择器答案

【问题标题】：ng-disabled doesnt disable date pickerng-disabled 不会禁用日期选择器
【发布时间】：2021-12-09 09:42:04
【问题描述】：

我正在为到期日期实现一个简单的日期选择器，如果选中了从不复选框，则需要禁用该日期选择器。使用 ng-model 概念，我将其实现如下：

<label>Click me to toggle: <input type="checkbox" ng-model="checked" /></label><br />
  <input type="date" name="date" ng-disabled="checked" />

由于某种原因，这在我的项目中不起作用，因此我将其粘贴到 stackblitz 项目中以查看是否有效。不幸的是，它在那里也不起作用

Stackblitz demo

谁能告诉我我在这里做错了什么？

【问题讨论】：

ng-model="checked" 用于 angularJs 而不是 angular+2

标签： angular datepicker angular-ngmodel

【解决方案1】：

您应该使用正确的[(ngModel)] 和[disabled] Inputs / Outputs。

请阅读NgModel。

见StackBlitz。

【讨论】：

【解决方案2】：

对于 angular2 或更高版本，您必须使用此语法

Ts：

从'@angular/core'导入{组件}；

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  
})
export class AppComponent  {
  title = "Tour of Heroes";
  author = "Sourabh Sriom"
  checked = false;
}

HTML

<h1>{{title}}</h1>
<nav>
  <a routerLink="/heroes">Heroes</a>
</nav>

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

<router-outlet></router-outlet>
<app-messages></app-messages>

欲了解更多信息：https://angular.io/api/forms/NgModel

【讨论】：