Skip to main content
The InputPassword class creates a password input field that masks the entered text for secure password entry. It extends the Input class and inherits all its functionality while automatically setting the type to 'password'.

​
Inheritance

ObjectBase → NodeBase → InputBaseNode → Input → InputPassword

​
Constructor

new InputPassword(
  id: string,
  placeholder?: string,
  value?: any,
  maxCharCount?: number,
  singleLine?: boolean,
  icon?: string,
  errorMessage?: string,
  disabled?: boolean,
  readOnly?: boolean,
  validator?: Validator,
  asyncValidator?: AsyncValidator,
  action?: Action | Action[]
)

​
Parameters

​
id
string
required
The unique identifier for the password field in the DOM.
​
placeholder
string
The placeholder text displayed when the field is empty.
​
value
any
The initial value of the password field (not recommended for security reasons).
​
maxCharCount
number
Maximum number of characters allowed in the password.
​
singleLine
boolean
default:"false"
Whether the password field should be displayed in a single line layout.
​
icon
string
Material icon name to display alongside the password field.
​
errorMessage
string
Custom error message to display when validation fails.
​
disabled
boolean
Whether the password field is disabled.
​
readOnly
boolean
default:"false"
Whether the password field is read-only.
​
validator
Validator
Synchronous validator(s) to apply to the password field. Can be a single ValidatorFn, an array of ValidatorFn, or null.
​
asyncValidator
AsyncValidator
Asynchronous validator(s) to apply to the password field. Can be a single AsyncValidatorFn, an array of AsyncValidatorFn, or null.
​
action
Action | Action[]
Action(s) to execute when specific events occur on the password field.

​
Properties

Inherits all properties from Input, with the following override:
PropertyTypeDescription
typeNodeTypeAutomatically set to 'password'

​
Methods

Inherits all methods from Input:
  • editable() - Makes the password field editable
  • readonly() - Makes the password field read-only
  • apply() - Applies additional properties to the node
  • getNativeElement() - Returns the native DOM element

​
Usage Examples

​
Basic Password Field

import { InputPassword } from 'mat-dynamic-form';
import { Validators } from '@angular/forms';

const passwordField = new InputPassword('password', 'Password').apply({
  validator: Validators.required,
  icon: 'lock'
});

​
Password with Minimum Length

const passwordField = new InputPassword('password', 'Create Password').apply({
  validator: [Validators.required, Validators.minLength(8)],
  hint: 'Minimum 8 characters',
  icon: 'lock',
  errorMessage: 'Password must be at least 8 characters'
});

​
Password Confirmation

import { FormStructure, InputPassword } from 'mat-dynamic-form';
import { Validators } from '@angular/forms';

const formStructure = new FormStructure();
formStructure.nodes = [
  new InputPassword('password', 'Password').apply({
    validator: [Validators.required, Validators.minLength(8)],
    hint: 'Minimum 8 characters',
    icon: 'lock'
  }),
  
  new InputPassword('confirmPassword', 'Confirm Password').apply({
    validator: Validators.required,
    icon: 'lock',
    errorMessage: 'Passwords must match'
  })
];

​
Password with Pattern Validation

// Require at least one uppercase, one lowercase, one number, and one special character
const strongPasswordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

const passwordField = new InputPassword('password', 'Password').apply({
  validator: [
    Validators.required,
    Validators.pattern(strongPasswordPattern)
  ],
  hint: 'Must include uppercase, lowercase, number, and special character',
  errorMessage: 'Password does not meet security requirements'
});

​
Password with Character Limit

const passwordField = new InputPassword('password', 'Password', undefined, 128).apply({
  validator: [Validators.required, Validators.minLength(8)],
  hint: 'Between 8 and 128 characters',
  icon: 'lock'
});

​
Disabled Password Field

const passwordField = new InputPassword('password', 'Password').apply({
  disabled: true,
  hint: 'Password cannot be changed'
});

​
Password with Change Action

const passwordField = new InputPassword('newPassword', 'New Password').apply({
  validator: [Validators.required, Validators.minLength(8)],
  icon: 'lock',
  action: {
    type: 'valueChange',
    onEvent: (param) => {
      const passwordStrength = calculateStrength(param.event);
      console.log('Password strength:', passwordStrength);
    }
  }
});

function calculateStrength(password: string): string {
  if (password.length < 8) return 'weak';
  if (password.length < 12) return 'medium';
  return 'strong';
}

​
Security Best Practices

Never set a default value for password fields in production code. This would expose passwords in your source code.
  1. Minimum Length: Always enforce a minimum password length (typically 8 characters)
validator: [Validators.required, Validators.minLength(8)]
  1. Password Confirmation: Use two password fields for password creation
  2. Clear Error Messages: Provide helpful hints without exposing security details
  3. Character Limits: Set reasonable maximum character limits to prevent buffer overflow attacks
  4. Pattern Validation: Consider enforcing complexity requirements for sensitive applications

Build docs developers (and LLMs) love

Get started for freeTalk to us