angular 相关问题

html：发行日期 html: <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Issue Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="issue_date"> </nz-date-picker> </div> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Delivery Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" > </nz-date-picker> </div> ts： initializeForm() { this.purchaseOrderForm = new FormGroup({ issue_date: new FormControl(new Date().toISOString()), delivery_date: new FormControl('', Validators.compose([ Validators.required, ])), }) } 我想根据问题日期禁用之前的日期如果issue_date是：05-05-2024，那么在delivery_date，它将禁用issue_date的前一个日期，如果我更改它也将作为禁用前一个日期的方式工作。 [n.b：issue_date默认值是第一次设置为当前日期，因此用户可以根据需要更改它，但如果不更改它将设置为当前日期] 您可以向 [nzDisabledDate] 提供包含禁用日期逻辑的功能到您的 delivery_date 日期选择器。 <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDeliveryDate" > </nz-date-picker> disabledDeliveryDate = (date: Date): boolean => { let issueDate = this.purchaseOrderForm.controls.issue_date.value; if (!issueDate || !date) { return false; } return date.getTime() <= new Date(issueDate).getTime(); }; 演示@StackBlitz 您需要使用 nzDisabledDate 属性并提供一个函数，该函数返回一个布尔值，确定是否需要禁用/启用日期。下面是工作示例！ HTML <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDate" > </nz-date-picker> TS disabledDate = (current: Date): boolean => { const issueDateCtrl = this.purchaseOrderForm.get('issue_date'); const issueDateValue = issueDateCtrl?.value || null; // Can not select days before today and today return issueDateValue ? differenceInCalendarDays(current, new Date(issueDateValue)) < 0 : false; }; 完整代码： import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { differenceInCalendarDays, setHours } from 'date-fns'; import { DisabledTimeFn, DisabledTimePartial } from 'ng-zorro-antd/date-picker'; @Component({ selector: 'nz-demo-date-picker-disabled-date', template: ` <form [formGroup]="purchaseOrderForm"> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Issue Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="issue_date"> </nz-date-picker> </div> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Delivery Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDate" > </nz-date-picker> </div> </form> `, styles: [ ` nz-date-picker, nz-range-picker { margin: 0 8px 12px 0; } `, ], }) export class NzDemoDatePickerDisabledDateComponent { purchaseOrderForm = new FormGroup({ issue_date: new FormControl(new Date().toISOString()), delivery_date: new FormControl( '', Validators.compose([Validators.required]) ), }); disabledDate = (current: Date): boolean => { const issueDateCtrl = this.purchaseOrderForm.get('issue_date'); const issueDateValue = issueDateCtrl?.value || null; // Can not select days before today and today return issueDateValue ? differenceInCalendarDays(current, new Date(issueDateValue)) < 0 : false; }; } Stackblitz 演示

angular components ng-zorro-antd

回答 2 投票 0

Angular拦截器错误处理put&delete方法问题

我根据 Angular 返回的 http 响应显示警报。我的代码适用于 Get 和 post 方法，但不适用于 put 和 delete 方法。我被困在这里，如果有人可以提供帮助，我会非常高兴...

javascript angular error-handling angular-http-interceptors angular-errorhandler

回答 1 投票 0

Custum 属性未在 Angular 14 中设置

自定义属性未在 Angular 14 中设置。之前它适用于 Angular 7。下面是代码自定义属性未在 Angular 14 中设置。之前它适用于 Angular 7。下面是代码 <a href="javascript:void(0)" data-idvalue="{{idvalue}}" data-hashvalue=" {{hashvalue}}" data-xvalue="{{xvalue}}" data-yvalue="{{yvalue}}" data-titlevalue="{{title}}" data-difference="{{difference}}" id="cloudViewShowMore">{{MORE_INFO}}...</a> 可以设置锚标签的Href，但其他自定义属性不绑定。也尝试过这样的方式[attr.data-idvalue]="{{idvalue}}"但没有成功。我尝试过，可以使用下面的方法设置数据属性，效果很好！下面的工作示例！ import { Component } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; @Component({ selector: 'app-root', standalone: true, template: ` <a href="javascript:void(0)" [attr.data-id-value]="idvalue" [attr.data-hash-value]="hashvalue" [attr.data-xvalue]="xvalue" [attr.data-yvalue]="yvalue" [attr.data-titlevalue]="title" [attr.data-difference]="difference" id="cloudViewShowMore">{{MORE_INFO}}...</a> `, }) export class App { name = 'Angular'; idvalue = 'asdf'; hashvalue = '#WHFEFKSDFLSDFOSDF'; xvalue = 150; yvalue = 350; title = 'asdfjnasdfaosd'; difference = 150; MORE_INFO = 'MORE_INFO'; } bootstrapApplication(App); Stackblitz 演示

angular custom-attribute

回答 1 投票 0

使用 Angular 代码动态地将 HTML 注入到现有 DOM 中

我在 Angular 应用程序中使用 Bootstrap Tables。要在单元格中呈现自定义按钮，我必须从 Angular 组件编写 HTML 代码，将 HTML 定义为字符串。然而这样一来，我就可以...

angular angular-components bootstrap-table

回答 1 投票 0

angular 相关问题

最新问题