Simple login form demonstrating authentication UI with email and password fields.

Live Demo

Material Material

Overview

A minimal login form showing:

  • Email input with validation
  • Password input (masked)
  • Remember me checkbox
  • Submit button
  • Clean, focused UI

Implementation

import { Component } from '@angular/core';
import { DynamicForm, FormConfig } from '@ng-forge/dynamic-forms';

@Component({
  selector: 'app-login-form',
  imports: [DynamicForm],
  template: `<form [dynamic-form]="config"></form>`,
})
export class LoginFormComponent {
  config = {
    // Define common validation messages at the form level
    defaultValidationMessages: {
      required: 'This field is required',
      minLength: 'Must be at least {{requiredLength}} characters',
    },
    fields: [
      {
        key: 'title',
        type: 'text',
        label: 'Sign In',
        props: {
          elementType: 'h2',
        },
      },
      {
        key: 'email',
        type: 'input',
        label: 'Email Address',
        required: true,
        email: true,
        // Only specify custom message for 'email' - 'required' uses default
        validationMessages: {
          email: 'Please enter a valid email address',
        },
        placeholder: 'your@email.com',
        props: {
          type: 'email',
          hint: 'Enter the email associated with your account',
        },
      },
      {
        key: 'password',
        type: 'input',
        label: 'Password',
        required: true,
        minLength: 8,
        // Override default 'required' message with custom one
        validationMessages: {
          required: 'Password is required',
        },
        // 'minLength' will use default with interpolated {{requiredLength}}
        placeholder: 'Enter your password',
        props: {
          type: 'password',
        },
      },
      {
        key: 'remember',
        type: 'checkbox',
        label: 'Remember me for 30 days',
      },
      {
        type: 'submit',
        key: 'submit',
        label: 'Sign In',
      },
    ],
  } as const satisfies FormConfig;
}

Key Features

Email Validation

Built-in email format validation:

{
  key: 'email',
  email: true,  // Validates email format
  validationMessages: {
    email: 'Please enter a valid email',
  },
}

Password Security

Minimum length requirement and masked input:

{
  key: 'password',
  minLength: 8,
  props: {
    type: 'password',  // Masks input
  },
}

Remember Me Option

Simple checkbox for persistent login:

{
  key: 'remember',
  type: 'checkbox',
  label: 'Remember me',
}

Common Enhancements

Add "Forgot Password" Text

{
  type: 'text',
  key: 'forgotLink',
  label: 'Forgot your password?',
}

Text-field labels render as plain text, so HTML in a label appears literally. Place actual links in the host component template around the form.

Social Login Buttons

For social login buttons, you can use text fields with links or handle this outside the form:

{
  type: 'text',
  key: 'socialText',
  label: 'Or sign in with Google or GitHub',
}

Note: Social login typically involves OAuth flows handled outside the form. Consider placing social login buttons in your component template rather than in the form configuration.

Add Sign Up Text

{
  type: 'text',
  key: 'signupText',
  label: "Don't have an account?",
}

As with the forgot-password text, the sign-up link itself belongs in the host component template.

Use Cases

  • User authentication
  • Admin panels
  • Member portals
  • Dashboard access
  • Protected areas