禁用Angular中过期日期的创建按钮答案

【问题标题】：Disable Create Button for expired Dates in Angular禁用Angular中过期日期的创建按钮
【发布时间】：2022-02-03 17:00:58
【问题描述】：

如果 endDate 小于 currentDate，如何在 Angular 中启用/禁用按钮。例如：结束日期：01.02.2021 当前日期：01.02.2022 => 创建新条目的按钮将被禁用。

【问题讨论】：

@GRD 你能告诉我如何调用 enddate 的数据吗？ import { Contract } from '@src/models/contract'; public contracts: Contract[] = [];endDate: Date = Contract.contractEndDate;export class Contract { contractEndDate: Date;constructor(contract?: Partial<Contract>) { this.contractEndDate = null; }
@GRD：你能检查一下你的邮件吗？我给你发了东西

标签： html angular typescript

【解决方案1】：

我们可以使用> 运算符比较日期。我们使用 [disable] 来评估 prop isDisabled 以禁用或启用按钮。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  isDisabled: boolean = false;
  endDate: Date = new Date('Febuary 02, 2021 23:15:30');
  today: Date = new Date;
  constructor() {
    if (this.endDate < this.today) {
      this.isDisabled = true;
    }
   }
}

<button mat-stroked-button 
        color="primary" 
        class="common-button">Button
</button>
<button mat-stroked-button 
        color="primary"
        [disabled]="isDisabled"
        class="common-button">Button disabled
</button>

endDate: {{endDate}}
today: {{today}}

这是一个工作示例：https://stackblitz.com/edit/mat-button-molyas?file=src%2Fapp%2Fapp.component.ts

【讨论】：

您能告诉我如何调用 enddate 的数据吗？ import { Contract } from '@src/models/contract'; public contracts: Contract[] = []; endDate: Date = Contract.contractEndDate; export class Contract { contractEndDate: Date; constructor(contract?: Partial<Contract>) { this.contractEndDate = null; }
这是一个新问题，我不介意回答这个问题，但它会使当前问题饱和。请为此提出一个新问题。还请详细说明您的意思是要求结束日期？对我来说，您似乎正在尝试初始化 endDate 但从 Class 属性中获取它。为此，您首先需要类属性来拥有一些东西。然后将其分配给 endDate。
我无法再创建新问题。能否请您看一下我在此处添加为评论的代码？

【解决方案2】：

我的 HTML

<a class="btn btn-link" [ngClass]="{ 'disabled': !contract.availableLicenseCount && contract.contractEndDate < currentDate}" (click)="contract.availableLicenseCount && createNewLicense(contract)" >
  <i [c8yIcon]="'plus-circle'"></i> {{ 'New Licence' }}
</a>

我的组件

export class AllLicensesComponent implements OnInit {
  public contracts: Contract[] = [];
  endDate = new Date(contracts.contractEndDate);
  currentDate = new Date('2023-02-01');
}

我的模型

export class Contract {
  contractEndDate: Date;

  constructor(contract?: Partial<Contract>) {
    this.contractEndDate = null;
  }
}

【讨论】：