Custom Angular Validation and Formatting Library

This custom Angular library provides validators and a directive to help with form validation and input formatting. It includes the following features:

- Custom Validators for:
- No Whitespace
- Password Match
- URL Format
- Strong Password
- File Type & Size Validation
- Phone Number Formatting directive to apply specific input formats.

Installation

To install the library in your Angular project, you can either:

1. Download the source files and include them in your project.
2. Use npm to install it (if you plan to publish it to npm later):

``bash
npm install ngb-validation
`

$3

Alternatively, you can install it using Yarn:

`bash
yarn add ngb-validation
`

---

Usage

$3

Import the required validators and directives into your Angular component or module.

`typescript
import { noWhitespaceValidator, matchPasswordValidator, urlValidator, strongPasswordValidator, fileValidator, PhoneNumberFormatDirective } from 'ngb-validation';
`

Then, you can apply these validators in your form group:

`typescript
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { noWhitespaceValidator, matchPasswordValidator, urlValidator, strongPasswordValidator, fileValidator } from 'ngb-validation';

@Component({
selector: 'app-form-example',
templateUrl: './form-example.component.html',
})
export class FormExampleComponent {
form: FormGroup;
formData: FormData = new FormData();

constructor(private fb: FormBuilder) {
this.form = this.fb.group({
username: ['', [noWhitespaceValidator()]],
password: ['', [strongPasswordValidator()]],
confirmPassword: ['', [matchPasswordValidator('password', 'confirmPassword')]],
website: ['', [urlValidator()]],
profileImage: [{}, [fileValidator(['image/jpeg', 'image/png'], 5000000)]]
});
}

onSubmit() {
if (this.form.valid) {
console.log('Form Submitted!', this.form.value);
} else {
console.log('Form Invalid!');
}
}

onFileSelected(event: Event): void {
const input = event.target as HTMLInputElement;

if (input?.files?.length) {
const file = input.files[0];
let control: any = this.form.get('profileImage');
this.form.get('profileImage')?.updateValueAndValidity();
control?.setValue(file);
if (control?.valid) {
console.log('File is valid:', file);
// Append the file to FormData
this.formData.set('profileImage', file, file.name);
}
}
this.form.get('profileImage')?.markAsTouched();
}
}
`

$3

To use the phone number format directive, first import it:

`typescript
import { PhoneNumberFormatDirective } from 'ngb-validation';
@Component({
selector: 'app-form-example',
templateUrl: './form-example.component.html',
imports: [PhoneNumberFormatDirective]
});
export class FormExampleComponent {
@Input() format: string = '000-000-0000';
....
....
}
`

Then, add the directive to your component:

`html

`

This will automatically format the phone number input as the user types. You can also customize the format by changing the format input.

$3

Here's an example HTML template for using the other validators and phone number format directive:

`html


Username:

Username cannot contain only spaces.

Password:

Password must contain at least 8 characters, including an uppercase letter, a number, and a special character.

Confirm Password:

Passwords do not match.

Website URL:

Please enter a valid URL.

Profile Image (JPEG/PNG):

Please upload a valid file type (JPEG/PNG) and ensure the file size is less than 5MB.

Phone Number:

Please enter a valid phone number.

Submit

``

Issues

If you encounter any issues or bugs, please report them at:
GitHub Issues

---

Contributing

We welcome contributions! Feel free to submit a pull request or open an issue to discuss any changes.

---

Conclusion

This library provides essential form validation and input formatting tools for Angular projects. You can easily integrate these custom validators and directives into your forms, providing a better user experience and more consistent validation across your application.