Angular Registration Form Library

This library provides a customizable registration form for Angular applications.

Compatibility

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

Installation

You can install the library using npm:

npm i transit-registration-form

Usage

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

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

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

2. 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"
  [fullName]="false"
  [userName]="true"
  [email]="true"
  [gender]="true"
  [phoneNumber]="true"
  [ssn]="true"
  [passportNumber]="false"
  [birthday]="false"
  [password]="true"
  [confirmPassword]="true"
></lib-registration-form>

The lib-registration-form component take 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): take ar for Arabic and en for English.
• formTitle (string): take form title like Registrayion or Sign UP.
• submitButton (string): take submit button content.
• firstName (boolean): Enable/disable the first name field.
• lastName (boolean): Enable/disable the last name field.
• userName (boolean): Enable/disable the username field.
• email (boolean): Enable/disable the email 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.
• password (boolean): Enable/disable the password field.
• confirmPassword (boolean): Enable/disable the confirm password field.

Note: Set the input values based on your specific requirements. Note: the form contain the next inputs by default

• firstName.
• lastName.
• userName.
• email.
• password.
• confirmPassword. you can remove this input by set to it false value like [userName]="false" and you can add more inputs like you need like this [phoneNumber]="true".