import {Component, EventEmitter, forwardRef, Input, OnInit, Output} 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_ADDRESS_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => PlxTextInputIpAddressComponent),
multi: true
};
@Component({
selector: 'plx-text-input-ip-address',
template: `
`,
styleUrls: ['text-input.less'],
host: {'style': 'display: inline-block;'},
providers: [PX_TEXT_INPUT_IP_ADDRESS_CONTROL_VALUE_ACCESSOR]
})
export class PlxTextInputIpAddressComponent implements OnInit, ControlValueAccessor {
@Input() lang: string = 'zh'; //zh|en
@Input() size: string; //空代表普通尺寸,sm代表小尺寸
@Input() ipAddressCheckTip: string = ''; //
@Input() @BooleanFieldValue() required: boolean = false;
@Input() public ipValue: string;
@Output() public ipValueChange: EventEmitter = new EventEmitter();
@Input() public ipValueFlg : boolean;
@Output() public ipValueFlgChange: EventEmitter = new EventEmitter();
private isNull : boolean = true;
/** Callback registered via registerOnTouched (ControlValueAccessor) */
private _onTouchedCallback: () => void = noop;
/** Callback registered via registerOnChange (ControlValueAccessor) */
private _onChangeCallback: (_: any) => void = noop;
public errMsgs = {
'zh': {
'empty': '此项不能为空',
'invalidate': 'IP格式不对',
'range': '请输入正确的IPV4地址或IPV6地址',
'range-IPV4': '请输入正确的IPV4',
'range-IPV6': '请输入正确的IPV6'
},
'en': {
'empty': 'IP can not be empty',
'invalidate': 'IP format is incorrect',
'range': 'IP range is IPV4 or IPV6',
'range-IPV4': 'IP range is IPV4',
'range-IPV6': 'IP range is IPV6'
}
};
public errMsg: string;
public sizeClass: string;
constructor() {
}
ngOnInit(): void {
if (this.size === 'sm') {
this.sizeClass = 'plx-input-sm';
}
this.isNull = this.ipValueFlg;
if(this.repIPStr(this.ipValue) === ''&& !this.ipValueFlg){
this.ipValueFlg = false;
this.emitValue();
}
}
public keyUp(event: any): void {
this.setValueToOutside(this.validate());
this.emitValue();
}
public paste(event: any): void{
setTimeout(() => {
this.ipValue = event.target.value;
this.setValueToOutside(this.validate());
this.emitValue();
}, 0);
}
private emitValue(){
this.ipValueChange.emit(this.ipValue);
this.ipValueFlgChange.emit(this.ipValueFlg);
}
private setValueToOutside(validateFlg: boolean): void {
this.ipValueFlg = validateFlg;
let value;
if (validateFlg) {
if (this.ipValue) {
value = this.ipValue;
}
if(this.ipValue === "" && !this.isNull){
this.ipValueFlg = false;
}
} else {
value = false;
}
this._onChangeCallback(value);
}
writeValue(value: any): void {
//
this.errMsg = '';
this.ipValue = value;
if (value) {
this.validate();
}
}
registerOnChange(fn: any) {
this._onChangeCallback = fn;
}
registerOnTouched(fn: any) {
this._onTouchedCallback = fn;
}
public validate(): boolean {
this.errMsg = '';
if (this.required) {
if (!this.ipValue) {
this.errMsg = this.errMsgs[this.lang]['empty'];
return false;
}
}
if ((this.ipValue) && (!this.ipValue)) {
this.errMsg = this.errMsgs[this.lang]['invalidate'];
return false;
}
let blackStr = this.repIPStr(this.ipValue);
if(this.ipAddressCheckTip === ''){
if(this.ipValue !== '' && blackStr === ''){
this.errMsg = this.errMsgs[this.lang]['range'];
return false;
}
}else{
if(this.ipValue !== '' && this.ipAddressCheckTip !== blackStr) {
this.errMsg = this.errMsgs[this.lang]['range-'+ this.ipAddressCheckTip];
return false;
}
}
return true;
}
private repIPStr(value: any): string {
let blackStr = '';
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 "IPV4";
}
var regip6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/;
if (regip6.test(value)) {
return "IPV6";
}
return blackStr;
}
}