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

Posted 2023-05-07

【中文标题】ng-disabled 不会禁用日期选择器

【英文标题】：ng-disabled doesnt disable date picker

【发布时间】：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

【参考方案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