Angular Registration Form Library

This library provides a customizable registration form for Angular applications.

Compatibility

| Angular Version | Compatible? | | --------------- | ----------- | | 14.2.0+ | ✅ | | below 14.2.0 | ❌ |

Installation

You can install the library using npm:

npm i transit-form-registration

Usage

1. Import the RegistrationFormModule in your application's module:

import { RegistrationFormModule } from "transit-form-registration";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, RegistrationFormModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Import the library assets into your angular.json:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/transit-form-registration/assets",
    "output": "/assets"
  }
]

This step allows you to use the assets included in the library.

3. Use the lib-registration-form component in your Angular template:

<lib-registration-form backgroundImage="" imageSrc="" apiLink="" selectedLanguage="en" formTitle="Sign Up" submitButton="Sign Up" firstName="true" lastName="true" fullNam="false" userName="true" email="true" gender="true" phoneNumber="true" ssn="true" passportNumber="false" birthday="false" passwordThreshold="8" passphraseThreshold="32" [regExp]="regExp" (onFormSubmit)="handleRegistration($event)"></lib-registration-form>

The lib-registration-form component takes the following:

• backgroundImage (string): The URL of the background image for the registration form.
• imageSrc (string): The URL of the image to display in the registration form.
• apiLink (string): The API for submitting the registration form.
• selectedLanguage (string): Set the language; "ar" for Arabic and "en" for English.
• formTitle (string): Set the form title like "Register" or "Sign Up".
• submitButton (string): Set the Submit button's content.
• firstName (boolean): Enable/Disable the First Name field.
• lastName (boolean): Enable/Disable the Last Name field.
• userName (boolean): Enable/Disable the User Name field.
• email (boolean): Enable/Disable the E-mail field.
• gender (boolean): Enable/Disable the Gender field.
• ssn (boolean): Enable/Disable the Social Security Number field.
• passportNumber (boolean): Enable/Disable the Passport Number field.
• birthday (boolean): Enable/Disable the Birthday field.
• passwordThreshold (number): The minimum number of characters allowed in the password. Default is 8.
• passphraseThreshold (number): The maximum number of characters before the password is considered a passphrase (which is more secure). Default is 32.
• regExp (regular expression): What pattern to check the password against. Supply from a variable for the best results.

The component also has an "onFormSubmit" event whose data can be handled in your project.

Notes:

• Set the input values based on your specific requirements.
• The form includes these inputs by default:
  • firstName
  • lastName
  • userName
  • email

You can remove these inputs by setting them to "false" e.g. [userName]="false" and you can add more inputs as you need like [phoneNumber]="true".

4. Set the function that will handle the onFormSubmit event:

handleRegistration(event: any) {
  // Your code here
}

Do not forget to call the module service's handleRegistration(event) function.