Hi~ I'm beginer of Angular2.
When I use "ANGULAR 2 UI FRAMEWORK" as http://www.angulartypescript.com/angular-2-ui-framework/
also I use datepicker in my reactive form. and I had error below.
Unhandled Promise rejection: Template parse errors:
Can't bind to 'minDate' since it isn't a known property of 'datepicker'. ("nline-block; min-height:290px;">
{{minDate}}_{{showWeeks}}
<datepicker [(ngModel)]="dt" [ERROR ->][minDate]="minDate" [showWeeks]="true"></datepicker>
</div>
<hr />
"): WatchfaceDetailComponent@44:35
Can't bind to 'showWeeks' since it isn't a known property of 'datepicker'. ("ght:290px;">
{{minDate}}_{{showWeeks}}
<datepicker [(ngModel)]="dt" [minDate]="minDate" [ERROR ->][showWeeks]="true"></datepicker>
</div>
<hr />
"): WatchfaceDetailComponent@44:55
'datepicker' is not a known element:
1. If 'datepicker' is an Angular component, then verify that it is part of this module.
2. If 'datepicker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
<div style="display:inline-block; min-height:290px;">
{{minDate}}_{{showWeeks}}
[ERROR ->]<datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
</div>
<h"): WatchfaceDetailComponent@44:6 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'minDate' since it isn't a known property of 'datepicker'. ("nline-block; min-height:290px;">
{{minDate}}_{{showWeeks}}
<datepicker [(ngModel)]="dt" [ERROR ->][minDate]="minDate" [showWeeks]="true"></datepicker>
</div>
<hr />
"): WatchfaceDetailComponent@44:35
Can't bind to 'showWeeks' since it isn't a known property of 'datepicker'. ("ght:290px;">
{{minDate}}_{{showWeeks}}
<datepicker [(ngModel)]="dt" [minDate]="minDate" [ERROR ->][showWeeks]="true"></datepicker>
</div>
<hr />
"): WatchfaceDetailComponent@44:55
'datepicker' is not a known element:
1. If 'datepicker' is an Angular component, then verify that it is part of this module.
2. If 'datepicker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
<div style="display:inline-block; min-height:290px;">
{{minDate}}_{{showWeeks}}
[ERROR ->]<datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
</div>
<h"): WatchfaceDetailComponent@44:6
at TemplateParser.parse (http://localhost:4200/main.bundle.js:17621:19)
at RuntimeCompiler._compileTemplate (http://localhost:4200/main.bundle.js:42428:51)
at http://localhost:4200/main.bundle.js:42351:83
at Set.forEach (native)
at compile (http://localhost:4200/main.bundle.js:42351:47)
at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:88685:26)
at Zone.run (http://localhost:4200/main.bundle.js:88567:43)
at http://localhost:4200/main.bundle.js:88955:57
at ZoneDelegate.invokeTask (http://localhost:4200/main.bundle.js:88718:35)
at Zone.runTask (http://localhost:4200/main.bundle.js:88607:47) Error: Template parse errors:
Can't bind to 'minDate' since it isn't a known property of 'datepicker'. ("nline-block; min-height:290px;">
{{minDate}}_{{showWeeks}}
<datepicker [(ngModel)]="dt" [ERROR ->][minDate]="minDate" [showWeeks]="true"></datepicker>
</div>
<hr />
"): WatchfaceDetailComponent@44:35
Can't bind to 'showWeeks' since it isn't a known property of 'datepicker'. ("ght:290px;">
{{minDate}}_{{showWeeks}}
<datepicker [(ngModel)]="dt" [minDate]="minDate" [ERROR ->][showWeeks]="true"></datepicker>
</div>
<hr />
"): WatchfaceDetailComponent@44:55
'datepicker' is not a known element:
and I will show you my code below. app.module
//import {MODAL_DIRECTIVES,TOOLTIP_DIRECTIVES,TYPEAHEAD_DIRECTIVES,CollapseDirective,PaginationComponent } from "ng2-bootstrap/ng2-bootstrap";
import { AppComponent } from './app.component';
import {routing, appRoutingProviders} from './app.routing';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { WatchfaceModule } from './watchface/watchface.module';
import { MenuModule } from './menu/menu.module';
import { ConfigModule } from './config/config.module';
import { PagerService } from './_services/index';
//import { DatePicker } from './component/datepicker.component';
/**
* Demo Component Bootstrap- Start
*/
//import { AccordionDemoComponent } from './com-impl/accordion/accordion-demo.component';
//import { AlertDemoComponent } from './com-impl/alert/alert-demo.component';
//import { ButtonDemoComponent } from './com-impl/buttons/button-demo.component';
//import { CarouselDemoComponent } from './com-impl/carousel/carousel-demo.component';
//import { CollapseDemoComponent } from './com-impl/collapse/collapse-demo.component';
//import { DropdownDemoComponent } from './com-impl/dropdown/dropdown-demo.component';
//import { ModalDemoComponent } from './com-impl/modal/modal-demo.component';
//import { ProgressbarDemoComponent } from './com-impl/progressbar/progressbar-demo.component';
//import { RatingDemoComponent } from './com-impl/rating/rating-demo.component';
//import { TabsDemoComponent } from './com-impl/tabs/tabs-demo.component';
//import { TooltipDemoComponent } from './com-impl/tooltip/tooltip-demo.component';
//import { TypeaheadDemoComponent } from './com-impl/typeahead/typeahead-demo.component';
//import { PaginationDemoComponent } from './com-impl/pagination/pagination-demo.component';
import { DatepickerDemoComponent } from './com-impl/datepicker/datepicker-demo.component';
//import { TimepickerDemoComponent } from './com-impl/timepicker/timepicker-demo.component';
/**
* Demo Component Bootstrap- End
*/
/**
* Bootstrap Modules - Start
*/
import { AlertModule } from './com/alert/alert.module';
import { AccordionModule } from './com/accordion/accordion.module';
import { ButtonsModule } from './com/buttons/buttons.module';
import { CarouselModule } from './com/carousel/carousel.module';
import { DropdownModule } from './com/dropdown/dropdown.module';
import { ModalModule } from './com/modal/modal.module';
import { ProgressbarModule } from './com/progressbar/progressbar.module';
import { RatingModule } from './com/rating/rating.module';
import { TabsModule } from './com/tabs/tabs.module';
import { TooltipModule } from './com/tooltip/tooltip.module';
import { TypeaheadModule } from './com/typeahead/typeahead.module';
import { CollapseModule } from './com/collapse/collapse.module';
import { PaginationModule } from './com/pagination/pagination.module';
import { DatepickerModule } from './com/datepicker/datepicker.module';
import { TimepickerModule } from './com/timepicker/timepicker.module';
/**
* Bootstrap Modules - End
*/
/**
* Other Modules - Start
*/
import { NgGridModule } from './com/grid/modules/NgGrid.module'; // grid system
//import { AgmCoreModule } from './com/googlemaps/core'; // google maps
import { UPLOAD_DIRECTIVES } from './com/fileupload/ng2-uploader';
/**
* Other Modules - End
*/
/**
* Demo Other Modules Components - Start
*/
import { GridDemoComponent } from './com-impl/grid/grid-demo.component'; // grid system demo
//import { GoogleMapsDemoComponent } from './com-impl/googlemaps/googlemaps-demo.component'; // google maps demo
import { FileUploadDemoComponent } from './com-impl/fileupload/fileupload-demo.component'; // google maps demo
/**
* Demo Other Modules Components - End
*/
@NgModule({
declarations: [
AppComponent,
// AccordionDemoComponent,
// AlertDemoComponent,
// ButtonDemoComponent,
// CarouselDemoComponent,
// CollapseDemoComponent,
// DropdownDemoComponent,
// ModalDemoComponent,
// ProgressbarDemoComponent,
// RatingDemoComponent,
// TabsDemoComponent,
// TooltipDemoComponent,
// TypeaheadDemoComponent,
DatepickerDemoComponent,
// TimepickerDemoComponent,
// PaginationDemoComponent,
// GridDemoComponent,
//GoogleMapsDemoComponent,
//datepicker,
UPLOAD_DIRECTIVES,
FileUploadDemoComponent
],
imports: [
DatepickerModule,
BrowserModule,
FormsModule,
HttpModule,
routing,
MenuModule,
ConfigModule,
WatchfaceModule,
//BrowserModule,
//FormsModule,
ReactiveFormsModule,
//HttpModule,
AlertModule,
AccordionModule,
ButtonsModule,
CarouselModule,
CollapseModule,
DropdownModule,
ModalModule,
ProgressbarModule,
RatingModule,
TabsModule,
TooltipModule,
TypeaheadModule,
TimepickerModule,
PaginationModule,
NgGridModule,//grid
// AgmCoreModule.forRoot({
// apiKey: 'Your - > Google-MAPS-API-KEY - here' //google maps api key
// }),
],
providers: [
appRoutingProviders,
PagerService
],
bootstrap: [AppComponent]
})
export class AppModule {}
watchface-deatail.component
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';
import { Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Watchface } from './watchface';
import { WatchfaceService} from './watchface.service';
import * as moment from 'moment';
let template = require('./watchface-detail.component.html');
@Component({
//moduleId: module.id,
selector: 'watchface-form',
template: template,
providers: [WatchfaceService]
})
export class WatchfaceDetailComponent implements OnInit {
//################################
// datepicker
//################################
public dt: Date = new Date();
public minDate: Date = void 0;
public events: Array<any>;
public tomorrow: Date;
public afterTomorrow: Date;
public formats: Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];
public format: string = this.formats[0];
public dateOptions: any = {
formatYear: 'YY',
startingDay: 1
};
private opened: boolean = false;
//################################
// paging, form validation
//################################
private allItems: any[];
form: FormGroup;
watchface: Watchface;
itemNo: number;
errorMessage: string;
formErrors = {
artist: '',
artistId: '',
description: '',
featuredBanner: '',
fileUpdatedAt: '',
functions: '',
image1: '',
image2: '',
image3: '',
image4: '',
image5: '',
likes: '',
username: '',
addresses: [
{ city: '', country: '' }
]
};
validationMessages = {
artist: {
required: 'artist is required.',
minlength: 'artist must be 1 characters.',
maxlength: 'artist can\'t be longer than 255 characters.'
},
artistId: {
required: 'artist_id is required.',
minlength: 'artist_id must be 1 characters.',
maxlength: 'artist_id can\'t be longer than 255 characters.'
},
description: {
required: 'description is required.',
minlength: 'description must be 1 characters.',
maxlength: 'description can\'t be longer than 255 characters.'
},
featuredBanner: {
required: 'featuredBanner is required.',
minlength: 'featuredBanner must be 1 characters.',
maxlength: 'featuredBanner can\'t be longer than 255 characters.'
},
fileUpdatedAt: {
required: 'fileUpdatedAt is required.',
minlength: 'fileUpdatedAt must be 1 characters.',
maxlength: 'fileUpdatedAt can\'t be longer than 255 characters.'
},
functions: {
required: 'functions is required.',
minlength: 'functions must be 1 characters.',
maxlength: 'functions can\'t be longer than 255 characters.'
},
image1: {
required: 'image1 is required.',
minlength: 'image1 must be 1 characters.',
maxlength: 'image1 can\'t be longer than 255 characters.'
},
image2: {
required: 'image1 is required.',
minlength: 'image1 must be 1 characters.',
maxlength: 'image1 can\'t be longer than 255 characters.'
},
image3: {
required: 'image1 is required.',
minlength: 'image1 must be 1 characters.',
maxlength: 'image1 can\'t be longer than 255 characters.'
},
image4: {
required: 'image1 is required.',
minlength: 'image1 must be 1 characters.',
maxlength: 'image1 can\'t be longer than 255 characters.'
},
image5: {
required: 'image1 is required.',
minlength: 'image1 must be 1 characters.',
maxlength: 'image1 can\'t be longer than 255 characters.'
},
likes: {
required: 'likes is required.',
minlength: 'likes must be 1 characters.',
maxlength: 'likes can\'t be longer than 255 characters.'
},
name: {
required: 'Name is required.',
minlength: 'Name must be 3 characters.',
maxlength: 'Name can\'t be longer than 6 characters.'
},
username: {
required: 'Username is required.',
minlength: 'Username must be 3 characters.'
},
addresses: {
city: {
required: 'City is required.',
minlength: 'City must be 3 characters.'
},
country: {
required: 'Country is required.'
}
}
};
constructor(private watchfaceService: WatchfaceService, private route: ActivatedRoute, private fb: FormBuilder) {
this.route.params.subscribe(
params => {
this.itemNo = params['no'];
}
);
//################################
// datepicker
//################################
(this.tomorrow = new Date()).setDate(this.tomorrow.getDate() + 1);
(this.afterTomorrow = new Date()).setDate(this.tomorrow.getDate() + 2);
(this.minDate = new Date()).setDate(this.minDate.getDate() - 1000);
this.events = [
{ date: this.tomorrow, status: 'full' },
{ date: this.afterTomorrow, status: 'partially' }
];
}
ngOnInit() {
this.getWatchface();
// build the data model for our form
this.buildForm();
}
getWatchface() {
let params: URLSearchParams = new URLSearchParams();
params.set('no', this.itemNo + "");
this.watchfaceService.getWatchfaceList(params)
.subscribe(
allItems => {
if (allItems != null && allItems.length > 0) {
this.watchface = allItems[0];
console.log(this.watchface);
}
//this.buildForm();
//this.allItems = allItems;
},
error => this.errorMessage = <any>error);
}
/**
* build the initial form
*/
buildForm() {
// build our form
this.form = this.fb.group({
no: ['', [Validators.minLength(1), Validators.maxLength(255)]],
//no: ['', Validators.required, [Validators.minLength(1), Validators.maxLength(255)]],
artist: ['', Validators.required, [Validators.minLength(1), Validators.maxLength(255)]],
artistId: ['', [Validators.minLength(1), Validators.maxLength(255)]],
description: ['', [Validators.minLength(1), Validators.maxLength(255)]],
featuredBanner: ['', [Validators.minLength(1), Validators.maxLength(255)]],
fileUpdatedAt: ['', [Validators.minLength(1), Validators.maxLength(255)]],
functions: ['', [Validators.minLength(1), Validators.maxLength(255)]],
image1: ['', [Validators.minLength(1), Validators.maxLength(255)]],
image2: ['', [Validators.minLength(1), Validators.maxLength(255)]],
image3: ['', [Validators.minLength(1), Validators.maxLength(255)]],
image4: ['', [Validators.minLength(1), Validators.maxLength(255)]],
image5: ['', [Validators.minLength(1), Validators.maxLength(255)]],
likes: ['', [Validators.minLength(1), Validators.maxLength(255)]],
name: ['', [Validators.minLength(3), Validators.maxLength(6)]],
username: ['', Validators.minLength(3)],
addresses: this.fb.array([
this.createAddress()
])
});
// watch for changes and validate
this.form.valueChanges.subscribe(data => {
this.validateForm();
}
);
}
/**
* validate the entire form
*/
validateForm() {
for (let field in this.formErrors) {
// clear that input field errors
this.formErrors[field] = '';
// grab an input field by name
let input = this.form.get(field);
if (input.invalid && input.dirty) {
// figure out the type of error
// loop over the formErrors field names
for (let error in input.errors) {
// assign that type of error message to a variable
this.formErrors[field] = this.validationMessages[field][error];
}
}
}
}
//################################
// datepicker
//################################
createAddress() {
return this.fb.group({
city: ['', Validators.minLength(3)],
country: ['']
});
}
addAddress() {
let addresses = <FormArray>this.form.get('addresses');
addresses.push(this.createAddress());
}
removeAddress(i) {
let addresses = <FormArray>this.form.get('addresses');
addresses.removeAt(i);
}
processForm() {
console.log('processing', this.form.value);
}
public getDate(): number {
return this.dt && this.dt.getTime() || new Date().getTime();
}
public today(): void {
this.dt = new Date();
}
public d20090824(): void {
this.dt = moment('2009-08-24', 'YYYY-MM-DD').toDate();
}
// todo: implement custom class cases
public getDayClass(date: any, mode: string): string {
if (mode === 'day') {
let dayToCheck = new Date(date).setHours(0, 0, 0, 0);
for (let i = 0; i < this.events.length; i++) {
let currentDay = new Date(this.events[i].date).setHours(0, 0, 0, 0);
if (dayToCheck === currentDay) {
return this.events[i].status;
}
}
}
return '';
}
public disabled(date: Date, mode: string): boolean {
return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
}
public open(): void {
this.opened = !this.opened;
}
public clear(): void {
this.dt = void 0;
}
public toggleMin(): void {
this.dt = new Date(this.minDate.valueOf());
console.log(this.dt);
}
}
watchface-detail.component.html
<form (ngSubmit)="processForm()" [formGroup]="form">
<div class="form-group">
<div>
<pre class="card card-block card-header">Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
<h4>Inline</h4>
<div style="display:inline-block; min-height:290px;">
{{minDate}}_{{showWeeks}}
<datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
</div>
<hr />
<button type="button" class="btn btn-sm btn-info" (click)="today()">Today</button>
<button type="button" class="btn btn-sm btn-default btn-secondary" (click)="d20090824();">2009-08-24</button>
<button type="button" class="btn btn-sm btn-danger" (click)="clear()">Clear</button>
<button type="button" class="btn btn-sm btn-default btn-secondary" (click)="toggleMin()" tooltip="After today restriction">Min date</button>
</div>
</div>
<div class="form-group col-sm-12 text-center">
<br/><br/>
<button type="submit" class="btn btn-danger">Submit</button>
</div>
</form>
also, add additiona base code of datepicker datepicker.module.ts
import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms';
import { DatePickerInnerComponent } from './datepicker-inner.component';
import { DatePickerComponent } from './datepicker.component';
import { DayPickerComponent } from './daypicker.component';
import { MonthPickerComponent } from './monthpicker.component';
import { YearPickerComponent } from './yearpicker.component';
import { ComponentsHelper } from '../utils/components-helper.service';
@NgModule({
imports: [CommonModule, FormsModule],
declarations: [DatePickerComponent, DatePickerInnerComponent, DayPickerComponent,
MonthPickerComponent, YearPickerComponent],
exports: [DatePickerComponent, DatePickerInnerComponent, DayPickerComponent, FormsModule,
MonthPickerComponent, YearPickerComponent],
providers: [ComponentsHelper]
})
export class DatepickerModule {
}
datepicker.component.ts
import { Component, EventEmitter, Input, Output, Self, ViewChild } from '@angular/core'; import { DatePickerInnerComponent } from './datepicker-inner.component'; import { ControlValueAccessor, NgModel } from '@angular/forms';
/* tslint:disable:component-selector-name component-selector-type */
@Component({
selector: 'datepicker[ngModel]',
template: `
<datepicker-inner [activeDate]="activeDate"
(update)="onUpdate($event)"
[datepickerMode]="datepickerMode"
[initDate]="initDate"
[minDate]="minDate"
[maxDate]="maxDate"
[minMode]="minMode"
[maxMode]="maxMode"
[showWeeks]="showWeeks"
[formatDay]="formatDay"
[formatMonth]="formatMonth"
[formatYear]="formatYear"
[formatDayHeader]="formatDayHeader"
[formatDayTitle]="formatDayTitle"
[formatMonthTitle]="formatMonthTitle"
[startingDay]="startingDay"
[yearRange]="yearRange"
[customClass]="customClass"
[dateDisabled]="dateDisabled"
[onlyCurrentMonth]="onlyCurrentMonth"
[shortcutPropagation]="shortcutPropagation"
(selectionDone)="onSelectionDone($event)">
<daypicker tabindex="0"></daypicker>
<monthpicker tabindex="0"></monthpicker>
<yearpicker tabindex="0"></yearpicker>
</datepicker-inner>
`,
providers: [NgModel]
})
/* tslint:enable:component-selector-name component-selector-type */
export class DatePickerComponent implements ControlValueAccessor {
@Input() public datepickerMode:string;
@Input() public initDate:Date;
@Input() public minDate:Date;
@Input() public maxDate:Date;
@Input() public minMode:string;
@Input() public maxMode:string;
@Input() public showWeeks:boolean;
@Input() public formatDay:string;
@Input() public formatMonth:string;
@Input() public formatYear:string;
@Input() public formatDayHeader:string;
@Input() public formatDayTitle:string;
@Input() public formatMonthTitle:string;
@Input() public startingDay:number;
@Input() public yearRange:number;
@Input() public onlyCurrentMonth:boolean;
@Input() public shortcutPropagation:boolean;
@Input() public customClass:Array<{date:Date, mode:string, clazz:string}>;
// todo: change type during implementation
@Input() public dateDisabled:any;
@Output() public selectionDone:EventEmitter<Date> = new EventEmitter<Date>(undefined);
public onChange:any = Function.prototype;
public onTouched:any = Function.prototype;
public cd:NgModel;
private _now:Date = new Date();
private _activeDate:Date;
@ViewChild(DatePickerInnerComponent) private datePicker: DatePickerInnerComponent;
@Input()
public get activeDate():Date {
return this._activeDate || this._now;
}
public constructor(@Self() cd:NgModel) {
this.cd = cd;
// hack
cd.valueAccessor = this;
}
public set activeDate(value:Date) {
this._activeDate = value;
}
public onUpdate(event:any):void {
this.cd.viewToModelUpdate(event);
}
public onSelectionDone(event:Date):void {
this.selectionDone.emit(event);
}
// todo: support null value
public writeValue(value:any):void {
if (this.datePicker.compare(value, this._activeDate) === 0) {
return;
}
if (value && value instanceof Date) {
this.activeDate = value;
this.datePicker.select(value);
return;
}
this.activeDate = value ? new Date(value) : void 0;
}
public registerOnChange(fn:(_:any) => {}):void {
this.onChange = fn;
}
public registerOnTouched(fn:() => {}):void {
this.onTouched = fn;
}
}
and here is my project structure. enter image description here
so, I want to know what is the problem of my code, and how can I solve this problem to stop my digging..
datepickerselector? Can you also include it in your question?