Skip to content

Add support for angular2 forms #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gergelybodor wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Add support for angular2 forms #63

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bdf9773
implement ControlValueAccessor interface
Jan 19, 2017
8772c3c
updated code with original repo master branch
gergelybodor Feb 22, 2017
c68dbf1
added support for angular forms
gergelybodor Feb 22, 2017
598b1cb
Merge branch 'master' into master
gergelybodor Feb 22, 2017
7f0f817
Merge branch 'master' into master
gergelybodor Feb 24, 2017
325ebce
removed select2 init in the writeValue function
gergelybodor Feb 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@
"watch": "tsc -w",
"build": "tsc",
"build-aot": "node_modules/.bin/ngc -p tsconfig-aot.json"

},
"dependencies": {
"@types/jquery": "^2.0.34",
Expand All @@ -33,7 +32,8 @@
"peerDependencies": {
"@angular/common": "^2.2.0",
"@angular/compiler": "^2.2.0",
"@angular/core": "^2.2.0"
"@angular/core": "^2.2.0",
"@angular/forms": "^2.2.0"
},
"devDependencies": {
"@angular/common": "^2.3.1",
Expand Down
49 changes: 46 additions & 3 deletions src/select2.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
import {
AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy,
Output, SimpleChanges, ViewChild, ViewEncapsulation, Renderer, OnInit
Output, SimpleChanges, ViewChild, ViewEncapsulation, Renderer, OnInit, forwardRef
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

import { Select2OptionData } from './select2.interface';

@Component({
selector: 'select2',
template: '<select #selector></select>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => Select2Component),
multi: true
}
]
})
export class Select2Component implements AfterViewInit, OnChanges, OnDestroy, OnInit {
export class Select2Component implements AfterViewInit, OnChanges, OnDestroy, OnInit, ControlValueAccessor {
@ViewChild('selector') selector: ElementRef;

// data for select2 drop down
Expand All @@ -35,6 +43,9 @@ export class Select2Component implements AfterViewInit, OnChanges, OnDestroy, On
// emitter when value is changed
@Output() valueChanged = new EventEmitter();

onChange: Function = () => {};
onTouched: Function = () => {};

private element: JQuery = undefined;
private check: boolean = false;

Expand Down Expand Up @@ -64,6 +75,8 @@ export class Select2Component implements AfterViewInit, OnChanges, OnDestroy, On
this.initPlugin();

const newValue: string = this.element.val();
this.onChange(newValue);
this.onTouched();
this.valueChanged.emit({
value: newValue
});
Expand All @@ -75,6 +88,8 @@ export class Select2Component implements AfterViewInit, OnChanges, OnDestroy, On
this.renderer.setElementProperty(this.selector.nativeElement, 'value', newValue);
this.element.trigger('change.select2');

this.onChange(newValue);
this.onTouched();
this.valueChanged.emit({
value: newValue
});
Expand All @@ -97,6 +112,8 @@ export class Select2Component implements AfterViewInit, OnChanges, OnDestroy, On
}

this.element.on('select2:select select2:unselect', function () {
Copy link
Contributor

@achimha achimha Feb 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this whole that business and use a closure:

this.element.on('select2:select select2:unselect', () => {

Copy link
Author

@gergelybodor gergelybodor Feb 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right. I will correct it.

that.onChange(that.element.val());
that.onTouched();
that.valueChanged.emit({
value: that.element.val()
});
Expand All @@ -107,6 +124,32 @@ export class Select2Component implements AfterViewInit, OnChanges, OnDestroy, On
this.element.off("select2:select");
}

writeValue(newValue: any) : void {
this.renderer.setElementProperty(this.selector.nativeElement, 'value', newValue);
this.element.trigger('change.select2');

this.onChange(newValue);
this.onTouched();
this.valueChanged.emit({
value: newValue
});
}

registerOnChange(fn: Function) : void {
this.onChange = fn;
}

registerOnTouched(fn: Function) : void {
this.onTouched = fn;
}

setDisabledState(isDisabled: boolean) : void {
if (this.disabled !== isDisabled) {
this.disabled = isDisabled;
this.renderer.setElementProperty(this.selector.nativeElement, 'disabled', isDisabled);
}
}

private initPlugin() {
if(!this.element.select2) {
if(!this.check) {
Expand Down