从 jQuery 插件更新 Angular 输入字段
Update Angular Input Field From jQuery Plugin
我在我的 angular 应用程序中使用 jQuery 插件。https://github.com/Pikaday/Pikaday
当用户从日期选择器输入中选择日期时,我希望它在 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 中选择的值更新 Angular 表单(使用 jQuery pikaday 插件)
如何处理?
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: ['',[]]
});
谢谢@Wen Hao Wu,我用了很多技巧终于解决了,不知道有没有更好的方法。
这是我做的。
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;
}
}
我在我的 angular 应用程序中使用 jQuery 插件。https://github.com/Pikaday/Pikaday
当用户从日期选择器输入中选择日期时,我希望它在 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 中选择的值更新 Angular 表单(使用 jQuery pikaday 插件)
如何处理?
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: ['',[]]
});
谢谢@Wen Hao Wu,我用了很多技巧终于解决了,不知道有没有更好的方法。
这是我做的。
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;
}
}