ReactiveFormとPrimeNg CalendarModuleの衝突

Question

primeNGカレンダーモジュールとreactiveFormsModuleの両方を使用しようとしていますが、一緒に使用するとカレンダーが消えます。

import {Common Module} from '@angular/common'; 
import {CalendarModule} from 'primeng/primeng'; 
import {ReactiveFormsModule} from '@angular/forms'; 

@NgModule({ 
imports: [CommonModule, ReactiveFormsModule, CalendarModule] 
}) 

と

<form [formGroup]="myFormName"> 
    <p-calendar formControlName="myFormControl"></p-calendar> 
</form> 

何かアドバイス。

Answer 1

ここには、p-calendarを使用した反応性フォームの簡単な例があります。

HTML：

<form [formGroup]="form" class="box-model form-support-margin"> 
    <div> 
    <p-calendar [dateFormat]="dateFormat" 
     [showIcon]="true" formControlName="tbDate" [readonlyInput]="true"> 
    </p-calendar>  
    </div> 
</form> 

<p>Date from form:</p> 
<p>{{form.value | json}}</p> 

TS：

import { Component } from "@angular/core"; 
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'input-overview-example', 
    templateUrl: 'input-overview-example.html', 
    styleUrls:['input-overview-example.css'] 
}) 
export class InputOverviewExample { 

    dateFormat: = "mm/dd/yy" 

    constructor( private fb: FormBuilder){} 

    ngOnInit() { 
    this.initFormGroup(); 
    } 

    initFormGroup() { 
    this.form = this.fb.group({ 
     tbDate: new FormControl(this.tbDate || '', Validators.required); 
    }); 
    } 
} 

Plunker demo