ng-disabled doesnt disable date picker-CodePudding

I am implementing a simple date picker for an expiration date that needs to be disabled if the never checkbox is checked. Using the ng-model concept I have implemented it as below :

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

For some reason this doesnt work in my project and so I pasted this in a stackblitz project to see if that works. Unfortunately it doesnt work there as well

Stackblitz demo

Can someone please tell me what it is that I am doing wrong here?

CodePudding user response：

You should use proper [(ngModel)] and [disabled] Inputs / Outputs.

Please read about NgModel.

See StackBlitz.

CodePudding user response：

With angular2 or higher you must use this syntax

Ts :

import { Component } from '@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>

For more info : https://angular.io/api/forms/NgModel