IP Input¶

Usage¶

When to use¶

For allowing users to enter IP-Addresses.
When validation for IP-Addresses are required.

Best Practices for IP Input¶

Ensure the input field is wide enough to accommodate different IP-Address formats.

Code¶

The directives are an enhancement to the HTML input field specifically for IPv4 and IPv6 addresses.

Features:

Validation - Provide forms input validation
Input Masking - Improved user experience by enforcing correct formatting
CIDR Support - Optional support for Classless Inter-Domain Routing (CIDR) notation (like 192.168.0.1/24)

IPv4 address¶

...
import { SiFormItemComponent } from '@siemens/element-ng/form';
import { SiIp4InputDirective } from '@siemens/element-ng/ip-input';

@Component({
  template: `
    <si-form-item label="IPv4 address">
      <input type="text" class="form-control" siIpV4 />
    </si-form-item>`,
  imports: [SiFormItemComponent, SiIp4InputDirective, ...]
})

IPv6 address¶

...
import { SiFormItemComponent } from '@siemens/element-ng/form';
import { SiIp6InputDirective } from '@siemens/element-ng/ip-input';

@Component({
  template: `
    <si-form-item label="IPv6 address"> 
      <input type="text" class="form-control" siIpV6 />
    </si-form-item>`,
  imports: [SiFormItemComponent, SiIp6InputDirective, ...]
})

SiIp4InputDirective API Documentation¶

selectorexported-as

input[siIpV4]siIpV4

Directive for IPv4 address input fields.

Usage:

import { SiFormItemComponent } from '@siemens/element-ng/form';
import { SiIp4InputDirective } from '@siemens/element-ng/ip-input';

@Component({
  template: `
    <si-form-item label="IPv4 address">
      <input type="text" class="form-control" siIpV4 />
    </si-form-item>
  `,
  imports: [SiFormItemComponent, SiIp4InputDirective, ...]
})

Input Properties¶

Name	Type	Default	Description
cidr ¶	`boolean`	`false`	Enable CIDR (Classless Inter-Domain Routing) notation.
disabled ¶	`boolean`	`false`	Whether the ip address input is disabled.
id ¶	`string`	`si-ip-input-${SiIpInputDirective.idCounter++}`

SiIp6InputDirective API Documentation¶

selectorexported-as

input[siIpV6]siIpV6

Directive for IPv6 address input fields.

Usage:

import { SiFormItemComponent } from '@siemens/element-ng/form';
import { SiIp6InputDirective } from '@siemens/element-ng/ip-input';

@Component({
  template: `
    <si-form-item label="IPv6 address">
      <input type="text" class="form-control" siIpV6 />
    </si-form-item>
  `,
  imports: [SiFormItemComponent, SiIp6InputDirective, ...]
})

Input Properties¶

Name	Type	Default	Description
cidr ¶	`boolean`	`false`	Enable CIDR (Classless Inter-Domain Routing) notation.
disabled ¶	`boolean`	`false`	Whether the ip address input is disabled.
id ¶	`string`	`si-ip-input-${SiIpInputDirective.idCounter++}`

Types Documentation¶

No types to document for items on this page.

Except where otherwise noted, content on this site is licensed under MIT License.