datepicker ngx-bootstrap和Validators Angular 4出错

时间:2017-12-06 23:59:46

标签: angular datepicker ngx-bootstrap

当我开始使用datepicker时,html改为:

<div class="form-group col-md-4">
<label for="arrivalDate">Entry and Departure</label>
<input formControlName="arrivalDate" class="form-control" id="arrivalDate" placeholder="mm/dd/yyyy - mm/dd/yyyy" bsDaterangepicker [minDate]="minDate" [bsConfig]="dpConfig">

下一个有一个组件:

this._form = this.fb.group({
   // Search basic
   destination: ['', Validators.required],
   arrivalDate: [null, Validators.required],
   qtyAdults: [0, [Validators.required, Validators.min(1) ]],
   qtyChilds: [0, Validators.required ],
   childsage: this.fb.array([]),
   adultsage: this.fb.array([]),
   serviceType: [],
   qtyProduct: ['1', Validators.min(1)]
});

因此,虽然它是输入类型日期,验证器没有失败,但是当它更改为ngx-bootstrap的日期选择器时,它会给出错误。

下一个错误:

  

错误:表单控件没有附加FormControl实例   名称为:'arrivalDate'的元素

在我使用之前没有给出错误,但是使用这个datepicker,开始给出错误

我正在使用此https://valor-software.com/ngx-bootstrap/#/datepicker

1 个答案:

答案 0 :(得分:2)

在html中我添加了一个div:

*ngIf = "isFormHotelActivate"

并在组件中:

_initFormHotels() {
    this._formT = this.fb.group({
       // Search basic
       origin: [''],
       destination: ['', Validators.required],
       arrivalDate: [null, Validators.required],
       qtyProduct: [1, Validators.min(1)]
    });
this.isFormHotelActivate = true;
}