2

I want to implement an input box so the user can enter an IP Address with Port (port can be optional). I want to make it like in Windows where there are 3 dots. I have tried with some mask components from the GitHub but when I want to enter the IP the input box will be like this: e.g. 10.1.40.__._ so I can't sumbit the result. Also I have tried to make 5 separate inputs box with dots between but I dosen't look good from an UX perspective.

Thank you for any help!

Windows input box that I want to implement This is what I've tried

mihaij
  • 95
  • 2
  • 7

1 Answers1

3

you can use library for masking ip

npm install --save ngx-mask

module

import {NgxMaskModule} from 'ngx-mask'

export const options: Partial<IConfig> | (() => Partial<IConfig>);

@NgModule({
  (...)
  imports: [
    NgxMaskModule.forRoot(options)
  ]
  (...)
})

html page

 <input mask="IP">

here is the reference https://github.com/JsDaddy/ngx-mask#readme

or

u can use pipe to transform the ip masking.

rajhim
  • 259
  • 2
  • 14