@trycatch/types-extensions

This lib provide some useful functions to extend core types and some of the Angular Types

Usage no npm install needed!

<script type="module">
  import trycatchTypesExtensions from 'https://cdn.skypack.dev/@trycatch/types-extensions';
</script>

README

Types Extensions

This lib provide some useful functions to extend core types and some of the Angular Types

How to use it

npm install --save @trycatch/types-extensions

in your .ts file where you want to use types extensions

import "@trycatch/types-extensions";

String Extensions

padZero(length: number)

let str = "trycatch";
str = str.padZero(10);
console.log("padZero string :", str);
// above will log to console - "00trycatch"

AbstractControl Extensions

control(path: string): AbstractControl;

in Module

import { ReactiveFormsModule } from "@angular/forms";

@NgModule({
    imports: [
        ....,
        ReactiveFormsModule,
        ....
    ]
    ....
})
export class AppModule {}

in Component

import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import "@trycatch/types-extensions";

@Component()
export class AppComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {}

    buildForm() {
        this.form = this.fb.group({
            firstName: ["", Validators.required],
            lastName: ["", Validators.required],
            address: this.fb.group({
                streetNo: ["", Validators.required],
                streetName: ["", Validators.required],
                suburb: ["", Validators.required]
            })
        });
    }

    someOtherMethod() {
        // below should get control: form -> firstName
        const firstNameControl = this.form.control("firstName");

        // below should get control: form -> address -> suburb
        const suburb = this.form.control("address.suburb");
    }
}

controlValue(path: string, property?: string): any;

in Module

import { ReactiveFormsModule } from "@angular/forms";

@NgModule({
    imports: [
        ....,
        ReactiveFormsModule,
        ....
    ]
    ....
})
export class AppModule {}

in Component

import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import "@trycatch/types-extensions";

@Component()
export class AppComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {}

    buildForm() {
        this.form = this.fb.group({
            firstName: ["", Validators.required],
            lastName: ["", Validators.required],
            address: this.fb.group({
                streetNo: ["", Validators.required],
                streetName: ["", Validators.required],
                suburb: ["", Validators.required]
            })
        });

        this.form.controls["firstName"].setValue("TryCatch");
        (<FormGroup>this.form.controls["address"]).controls[
            "streetName"
        ].setValue("Bourke");
        (<FormGroup>this.form.controls["address"]).controls["suburb"].setValue({
            name: "Melbourne",
            postcode: 3000,
            state: "VIC"
        });
    }

    someOtherMethod() {
        // below should get control: form -> firstName
        const firstNameControl = this.form.controlValue("firstName");

        // below should get control: form -> address -> streetName
        const streetName = this.form.controlValue("address.streetName");

        // below should get control: form -> address -> suburb
        // this will return { name: "Melbourne", postcode: 3000, state: "VIC" }
        const suburb = this.form.controlValue("address.suburb");

        // below should get control: form -> address -> suburb -> postcode
        // this will return 3000
        const suburb = this.form.controlValue("address.suburb", "postcode");
    }
}