import {Component, forwardRef, Input, OnInit} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import {BooleanFieldValue} from '../core/boolean-field-value';
const noop = () => {};
export const PX_TEXT_INPUT_IP_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => PlxTextInputIpComponent),
multi: true
};
@Component({
selector: 'plx-text-input-ip',
template: `
`,
styleUrls: ['text-input.less'],
host: {'style': 'display: inline-block;'},
providers: [PX_TEXT_INPUT_IP_CONTROL_VALUE_ACCESSOR]
})
export class PlxTextInputIpComponent implements OnInit, ControlValueAccessor {
@Input() lang: string = 'zh'; //zh|en
@Input() size: string; //空代表普通尺寸,sm代表小尺寸
@Input() @BooleanFieldValue() required: boolean = false;
/** Callback registered via registerOnTouched (ControlValueAccessor) */
private _onTouchedCallback: () => void = noop;
/** Callback registered via registerOnChange (ControlValueAccessor) */
private _onChangeCallback: (_: any) => void = noop;
public ipValue1: number;
public ipValue2: number;
public ipValue3: number;
public ipValue4: number;
public errMsgs = {
'zh': {
'empty': 'IP不能为空',
'invalidate': '非法IP',
'range': 'IP范围[0.0.0.0]~[255.255.255.255]'
},
'en': {
'empty': 'IP can not be empty',
'invalidate': 'Invalid IP',
'range': 'IP range is [0.0.0.0]~[255.255.255.255]'
}
};
public errMsg: string;
constructor() {
}
ngOnInit(): void {
}
public change(event: any) :void {
event.target.value = this.repNumber(event.target.value);
this.setValueToOutside(this.validate());
}
public keyup(event: any, frontElement: any, backElement: any): void {
event.target.value = this.repNumber(event.target.value);
if (((event.keyCode === 13 || event.keyCode === 110 || event.keyCode === 190)
&& event.target.value.length !== 0)
|| event.target.value.length === 3) { //enter:13,dot:110、190
if (event.keyCode !== 9) { //tab:9
if (backElement) {
backElement.autoFocus = true;
backElement.inputViewChild.nativeElement.select();
} else {
if (event.keyCode !== 110 && event.keyCode !== 190) {
event.target.blur();
}
}
}
}
if (event.target.value.length === 0 // backspace:8 delete:46
&& (event.keyCode === 8 || event.keyCode === 46)) {
if (frontElement) {
frontElement.autoFocus = true;
frontElement.inputViewChild.nativeElement.select();
}
}
this.setValueToOutside(this.validate());
}
private setValueToOutside(validateFlg: boolean): void {
let value;
if (validateFlg) {
if (this.ipValue1 && this.ipValue2 && this.ipValue3 && this.ipValue4) {
value = this.ipValue1 + '.'
+ this.ipValue2 + '.'+ this.ipValue3 + '.'+ this.ipValue4;
}
} else {
value = false;
}
this._onChangeCallback(value);
}
writeValue(value: any): void {
//
this.errMsg = '';
if (value) {
if (this.isIPStr(value)) {
let ipArr = value.split('.');
this.ipValue1 = ipArr[0];
this.ipValue2 = ipArr[1];
this.ipValue3 = ipArr[2];
this.ipValue4 = ipArr[3];
} else {
this.errMsg = this.errMsgs[this.lang]['invalidate'] + ' : ' + value;
}
}
}
registerOnChange(fn: any) {
this._onChangeCallback = fn;
}
registerOnTouched(fn: any) {
this._onTouchedCallback = fn;
}
public validate(): boolean {
this.errMsg = '';
if (this.required) {
if (!this.ipValue1 && !this.ipValue2 && !this.ipValue3 && !this.ipValue4) {
this.errMsg = this.errMsgs[this.lang]['empty'];
return false;
}
}
if ((this.ipValue1 || this.ipValue2 || this.ipValue3 || this.ipValue4)
&& (!this.ipValue1 || !this.ipValue2 || !this.ipValue3 || !this.ipValue4)) {
this.errMsg = this.errMsgs[this.lang]['invalidate'];
return false;
}
if ((this.ipValue1 && (this.ipValue1 < 0 || this.ipValue1 > 255))
|| (this.ipValue2 && (this.ipValue2 < 0 || this.ipValue2 > 255))
|| (this.ipValue3 && (this.ipValue3 < 0 || this.ipValue3 > 255))
|| (this.ipValue4 && (this.ipValue4 < 0 || this.ipValue4 > 255))) {
this.errMsg = this.errMsgs[this.lang]['range'];
return false;
}
return true;
}
private repNumber(value: any): number {
var reg = /^[\d]+$/g;
if (!reg.test(value)) {
let txt = value;
txt.replace(/[^0-9]+/, function (char, index, val) { //匹配第一次非数字字符
value = val.replace(/\D/g, ""); //将非数字字符替换成""
})
}
return value;
}
private isIPStr(value: any): boolean {
var regip4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/;
if (regip4.test(value)) {
return true;
}
return false;
}
}