Error with datepicker ngx-bootstrap and Validators Angular 4

Question

When I started to use the datepicker, the html changed to:

<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">

That have a component the next:

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)]
});

So, while it was the input type date the Validators did not fail, but when changing it to the datepicker of ngx-bootstrap, it gives error.

The error in the next:

Error: There is no FormControl instance attached to form control element with name: 'arrivalDate'

Before when I was using does not gives error, but with this datepicker, started to give that error

I'm using this https://valor-software.com/ngx-bootstrap/#/datepicker

I don't really understand the difference of your code before and after the error. You "started to use the datepicker" (which one?) and then "when changing it to the datepicker of ngx-bootstrap, it gives error" so how was your code before? — Francesco Borzi
– Francesco Borzi, Commented Dec 7, 2017 at 8:55
I already solved. It was a mistake with the creation of the formData that was staying active, so with an if it was solved! Thanks for answering! — Luis González
– Luis González, Commented Dec 7, 2017 at 14:24
then you can answer your own question with your solution, in case someone else has the same problem — Francesco Borzi
– Francesco Borzi, Commented Dec 7, 2017 at 15:44

Milo · Accepted Answer · 2017-12-08 18:51:58Z

2

In the html I added a div with:

*ngIf = "isFormHotelActivate"

and in the component:

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

edited Dec 8, 2017 at 18:51

Milo

3,4539 gold badges32 silver badges44 bronze badges

answered Dec 8, 2017 at 17:45

Luis González

336 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error with datepicker ngx-bootstrap and Validators Angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related