Angular ngx daterangepicker材料不';行不通
我尝试在我的角度项目中使用ngx daterangepicker材质。我用npm安装了它,将其添加到app module,并将其添加到输入字段,但它没有显示在浏览器中。我做错了什么 html(不是整个文件) app.module.ts(不是整个文件)Angular ngx daterangepicker材料不';行不通,angular,ngx-daterangepicker-material,Angular,Ngx Daterangepicker Material,我尝试在我的角度项目中使用ngx daterangepicker材质。我用npm安装了它,将其添加到app module,并将其添加到输入字段,但它没有显示在浏览器中。我做错了什么 html(不是整个文件) app.module.ts(不是整个文件) 添加更多细节。共享您的app.module.ts文件以及使用ngxDaterangepickerMd的相应HTML文件的ts文件。仅通过查看HTML很难识别。谢谢!我希望这足够了。谢谢你添加更多信息。我看不出你的代码有任何错误。尝试创建stackb
添加更多细节。共享您的app.module.ts文件以及使用ngxDaterangepickerMd的相应HTML文件的ts文件。仅通过查看HTML很难识别。谢谢!我希望这足够了。谢谢你添加更多信息。我看不出你的代码有任何错误。尝试创建stackblitz演示。如果在stackblitz上没有发生这种情况,那么您的字段名/ID中会有一些冲突。还要检查您尝试创建的动态ID是否正常工作。添加更多详细信息。共享您的app.module.ts文件以及使用ngxDaterangepickerMd的相应HTML文件的ts文件。仅通过查看HTML很难识别。谢谢!我希望这足够了。谢谢你添加更多信息。我看不出你的代码有任何错误。尝试创建stackblitz演示。如果在stackblitz上没有发生这种情况,那么您的字段名/ID中会有一些冲突。还要检查您尝试创建的动态ID是否正常工作。
<input
ngxDaterangepickerMd
[(ngModel)]="selected"
type="text"
class="form-control"
[class.invalid]="model.validationErrors.includes(field_name)"
[name]="field_name + '_' + random"
[id]="field_name + '_' + random"
[placeholder]="getPlaceholder()"
[title]="getTitle()"
[disabled]="disabled"
(change)="change($event)"
/>
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { BaseModel } from 'src/app/models/base-model/base-model.model';
import { ValidatorService } from 'src/app/services/validator/validator.service';
import { Moment } from 'moment';
import { LocaleConfig } from 'ngx-daterangepicker-material';
@Component({
selector: 'app-date-field',
templateUrl: './date-field.component.html',
styleUrls: ['./date-field.component.scss']
})
export class DateFieldComponent implements OnInit, OnChanges {
selected: {startDate: Moment, endDate: Moment};
@Input() field_name = 'date_field_name_not_defined';
@Input() model: BaseModel = new BaseModel();
@Input() disabled = false;
alwaysShowCalendars: boolean;
locale: LocaleConfig = {
format: 'YYY-MM-DD',
displayFormat: 'YYYY MMMM DD',
separator: ' To ',
cancelLabel: 'Mégse',
applyLabel: 'Ok',
};
constructor(private validatorService: ValidatorService,) {
this.alwaysShowCalendars = true;
}
ngOnInit() {}
// ngx-daterangepicker-material
isInvalidDate(date) {
return date.weekday() === 0;
}
isCustomDate(date) {
return (
date.weekday() === 0 ||
date.weekday() === 6
) ? 'mycustomdate' : false;
}
change(vat) {
console.log(vat);
}
validateField() {
if (!this.validatorService.validate(this.model[this.field_name], this.model.validationRules[this.field_name])) {
if (!this.model.validationErrors.includes(this.field_name)) {
this.model.validationErrors.push(this.field_name);
}
} else {
if (this.model.validationErrors.includes(this.field_name)) {
this.model.validationErrors.splice( this.model.validationErrors.indexOf(this.field_name), 1);
}
}
}
getTitle() { return this.field_name; }
getLabel() { return this.field_name; }
getPlaceholder() { return this.field_name; }
}
import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
@NgModule({
imports: [
NgxDaterangepickerMd.forRoot(),
],
})