代码之家 › 专栏 › 技术社区 › Ibrahim Azhar Armar

从jQuery插件更新角度输入字段

angular7 angular jquery

0

Ibrahim Azhar Armar · 技术社区 · 7 年前

当用户从datepicker输入中选择日期时,我希望它在angular FormControl中可用。

这是我的模板代码。

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

这是我的类型脚本代码。

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

现在我想用从start_dater(使用jQuery pikaday插件)中选择的值更新Angular form

2 回复 | 直到 7 年前

1

Wen W 7 年前

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: ['',[]]
});

2

0

Ibrahim Azhar Armar 7 年前

这就是我所做的。

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