Update Angular Input Field From jQuery Plugin

Question

I am using jQuery plugin in my angular app.https://github.com/Pikaday/Pikaday

When a user selects the date from datepicker input, I want it to be available in angular FormControl.

Here is my template code.

<input id="start_date" formControlName="start_date" type="text" class="form-control datepicker datepicker-input" placeholder="Start Date" readonly="readonly">

Here is my type script code.

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import {Router} from '@angular/router';
declare var $, Pikaday: any;

@Component({
  selector: 'app-search-main',
  templateUrl: './search-main.component.html',
  styleUrls: ['./search-main.component.css']
})
export class SearchMainComponent implements OnInit {

  params = {};
  searchForm = new FormGroup({
    keyword: new FormControl(''),
    start_date: new FormControl(''),
    end_date: new FormControl(''),
    duration: new FormControl(''),
  });

  constructor(private router: Router) {}

  ngOnInit() {
    var searchParams = sessionStorage.getItem('search-params');
    if (searchParams != '') {
      searchParams = JSON.parse(searchParams);
    }
    this.params = searchParams;
    $(document).ready(function(){
        $('input').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue',
            increaseArea: '20%'
          });
      var startDatePicker = new Pikaday({
          field: document.getElementById('start_date'),
          format: 'YYYY-MM-DD',
          minDate: new Date(),
          onSelect: function(date) {
            endDatePicker.setMinDate(date);
              endDatePicker.setDate(date);
              endDatePicker.show();
          }
      });
      var endDatePicker = new Pikaday({
          field: document.getElementById('end_date'),
          format: 'YYYY-MM-DD',
          minDate: new Date()
      });
    });
  }

  onSubmit() {
    this.router.navigate(['/search-result'], { queryParams: this.searchForm.value });
    return false;
  }
}

I now want to update Angular form with the value selected from start_dater (using jQuery pikaday plugin)

How to go about this?

Answer 1

Thank you @Wen Hao Wu, I finally solved it with a lot of hacks, not sure if there is better approach.

Here is what I did.

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
import {Router} from '@angular/router';
declare var $, Pikaday: any;

@Component({
  selector: 'app-search-main',
  templateUrl: './search-main.component.html',
  styleUrls: ['./search-main.component.css']
})
export class SearchMainComponent implements OnInit {

  searchForm = null;

  constructor(private router: Router, private _fb: FormBuilder) {}

  ngOnInit() {
    this.buildForm();
    $(document).ready(function(){
        var selectric = $('select').selectric();
      selectric.on('change', function(e) {
        this.searchForm.get('venue').setValue($("#venue option:selected").val());
        this.searchForm.get('meeting').setValue($("#meeting option:selected").val());
      }.bind(this));
    }.bind(this));
  }

  buildForm() {
    this.searchForm = this._fb.group({
      venue: ['',[]],
      meeting: ['',[]],
      keyword: ['',[]],
      duration: ['',[]],
      start_date: ['',[]],
      end_date: ['',[]],
      start_time: ['',[]],
      arrangement: ['',[]],
      guest: ['',[]],
      setup_style: ['',[]]
    });
  }

  onSubmit() {
    this.router.navigate(['/search-result'], { queryParams: this.searchForm.value });
    return false;
  }
}

Answer 2

import {FormBuilder} from '@angular/forms';

contructor(private _fb: FormBuilder){super();}

ngOnInit() {this.buildForm();}

buildForm(){
this.myForm = this._fb.group({
  field1: ['',[]], //set the field initial value to '', with an empty set of validators
  field2: ['',[]],
  field3: ['',[]]
});