ReactiveForm Vs 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"
  form : any;
  tbDate : any;

  constructor(   private fb: FormBuilder){}

   ngOnInit() {
     this.initFormGroup();
   }

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

Plunker demo

Answer 2

公认的答案不再适用于我了。我看到了很多表单的例子，它们展示了如何使用表单构建器，但没有提供关于验证的信息，我认为这是任何表单必不可少的一部分。

这就是我解决这个问题的方法。希望能有所帮助。

html:

<form [formGroup]="form" (ngSubmit)="submitParams()">
      <div class="form-group row">
        <div class="col-sm-6">
           <div>
            <h1>Foo</h1>
            <input id="foo" type="text" class="form-control" formControlName="foo" placeholder="Enter Foo" required />
            <div *ngIf="getFormControl('foo').invalid && (form.controls['foo'].dirty || form.controls['foo'].touched)" class="alert alert-danger"> FOO is required</div>
          </div>
        </div>
        <div class="col-sm-6">
          <div>
          <h1>DUE DATE</h1>
          <p-calendar formControlName="dueDate"  placeholder="Select Date"></p-calendar>
          <div *ngIf="getFormControl('dueDate').invalid && (form.controls['dueDate'].dirty || form.controls['dueDate'].touched)" class="alert alert-danger col-sm-9"> Due Date is required</div>
        </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
            <button type="submit" [disabled]="form.pristine || form.invalid">Generate</button>
        </div>
      </div>
    </form>

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 {

  foo : FormControl
  dueDate : FormControl
  form : FormGroup;


  constructor(   private fb: FormBuilder){}

   ngOnInit() {
     this.initFormGroup();
   }

   initFormGroup() {
     this.foo= this.formBuilder.control('', Validators.required);
     this.dueDate = this.formBuilder.control('', Validators.required);

     this.form = this.formBuilder.group({
     foo: this.foo,
     dueDate : this.dueDate  
    });
   }

    getFormControl(name){
    return this.form.get(name);
    }

    submitParams(){
    try{
    let params = {
        "foo": this.form.get('foo').value,
         "duedate": this.form.get('duedate').value
    };
    // logic to call service  
    }
    }
}