We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
When we bind the datepicker control in the form it runs fine.
But when we bind the datepicker Control in a custom control and bind this custom Control in a form it doesn't work.
For a test we have bind the datepicker control from ng-bootstrap in same custom control and this works.
What is wrong? Why it doesn't work with ejDatePicker?
|
Ø npm install
Ø npm start |
|
[app.modeule.ts]
import { EJAngular2Module } from 'ej-angular2';
import { DatePickerComponent } from './datepicker/datepicker.component';
import { PickerComponent } from './app.picker';
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, EJAngular2Module.forRoot(), RouterModule.forRoot(rootRouterConfig, { useHash: true })],
declarations: [AppComponent, HomeComponent, DatePickerComponent, PickerComponent],
bootstrap: [AppComponent]
})
[app.picker.ts]
import { Component, ViewEncapsulation, Input, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
const noop = () => {};
export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => PickerComponent),
multi: true
};
@Component({
selector: 'picker',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
template: `<div class='form-group'><ng-content></ng-content><input ej-datepicker [showOtherMonths] = 'showOtherMonths' [showRoundedCorner] = 'showRoundedCorner' [(ngModel)]='value' /> </div>`
})
export class PickerComponent {
@Input() showRoundedCorner;
@Input() showOtherMonths;
private innerValue: any = ''; //The internal data model
private onTouchedCallback: () => void = noop;
private onChangeCallback: (_: any) => void = noop;
get value(): any { return this.innerValue; }; //get accessor
set value(v: any) { //set accessor including call the onchange callback
if (v !== this.innerValue) {
this.innerValue = v;
this.onChangeCallback(v);
}
}
onBlur() { this.onTouchedCallback(); } //Set touched on blur
writeValue(value: any) { if (value !== this.innerValue) { this.innerValue = value; } }//From ControlValueAccessor interface
registerOnChange(fn: any) { this.onChangeCallback = fn; } //From ControlValueAccessor interface
registerOnTouched(fn: any) { this.onTouchedCallback = fn; } //From ControlValueAccessor interface
}
[app.component.html]
<form [formGroup]="registerForm">
<input type="text" ej-datepicker formControlName= "date" [enableStrictMode]= "false" [dateFormat]= "dateFormat1"/>
<p *ngIf="registerForm.controls.date.errors">This field is required!</p>
<picker [showOtherMonths]="false" formControlName= "date1" ></picker>
<p *ngIf="registerForm.controls.date1.errors">This field is required!</p>
Two Way binding Value: {{registerForm.controls.date1.value}}
</form>
[app.component.ts]
export class DatePickerComponent implements OnInit {
registerForm: FormGroup;
dateFormat1: string;
constructor(private formBuilder: FormBuilder) {
this.dateFormat1 = "dd/MMM/yyyy";
}
ngOnInit() {
this.registerForm = this.formBuilder.group({
date: ['', Validators.required],
date1: ['', Validators.required]
});
}
}
|
