ngx-forms-typed
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.6 • Public • Published

    Forms Typed (ngx-forms-typed)

    This project aims at providing several tools for Angular Forms development, including:

    • types for strongly typing your FormControls, FormGroups and FormArrays based on a Model type
    • functions for instantiating the TypedFormControl, TypedFormGroup and TypedFormArray based on a Model type
    • a helper function that enumerates all controls in a form (group)
      • calls methods on each of them
      • attaches their validators to a parent form (group)
      • attaches the touched/untouched behavior to a parent form (group)

    CHANGELOG

    Getting started

    1. npm i ngx-forms-typed
    2. Create a model for your form (see example)
    3. Inherit ControlValueAccessorConnector (see example)
    4. Enjoy your type safety!
    5. See examples:

    Features

    Manually applying strong types to existing forms

    Manually typed example - value - missing image

    Example shows adding the strong type to an existing form control and its value is now strong typed!

    Manually typed example - missing image The controls property is now strong typed!

    Note: The parameters for the FormControl are not strong typed. Notice we are passing the t as a FormControl and then are trying to access email. Hence the typedFormGroup function. See below

    Using the helper functions to strong type forms

    auto typed example - parameter error - missing image

    Using the function, now the parameters passed in are also strong typed!

    auto typed example - missing image

    And the setValue (patchValue also) method(s) auto typed example - missing image

    And the status changed auto typed example - missing image

    Using the helper function to touch all controls in a form

    A function allowing easy and type-safe interacting with each form control in a form: For each control in - missing image Will iterate over all controls in a form group or form array and call the markAsTouched method on them

    Type safe: For each control in - missing image Multiple methods as params supported: For each control in - missing image

    Interaction in parent-child form scenarios:

    For each control in - missing image

    Here we want the validation of the child Address form to influence the parent Person form. That's the addValidatorsTo() method's job. We also want to make the child form touched if we call the parent form touch() method. That's the markAsTouchedSimultaneouslyWith() method's job. For more details and how they interact see example implementation:

    ControlValueAccessorConnector (CVAC)

    A component that does all the heavy lifting when implementing a custom ControlValueAccessor

    • implement the required methods (registerOnChange, registerOnTouched writeValue and setDisabledState)
    • expose itself as NG_VALUE_ACCESSOR to the form control
    • make sure all the statuses are updated as needed up and down (from the parent down and from itself up)

    Example - the constructor super and ngOnInit super calls are all that's needed:

    @Component({
      selector: 'fty-event-form',
      templateUrl: './event-form.component.html',
      styleUrls: ['./event-form.component.css']
    })
    export class EventFormComponent implements OnInit extends ControlValueAccessorConnector<
        EventForm,
        TypedControlsIn<EventForm>
      >
    {
      constructor(@Optional() @Self() directive: NgControl) {
        super(
          directive,
          typedFormGroup({
            eventName: typedFormControl<string>(undefined, Validators.required),
            location: typedFormControl<string>(),
            dateStart: typedFormControl(defaultDateStart),
            timeStart: typedFormControl(defaultTimeStart)
          })
        );
      }
    
      ngOnInit(): void {
        super.ngOnInit();
      }
      onNameInputBlur() {
        this.onTouch();
      }
      onLocationInputBlur() {
        this.onTouch();
      }
      onStartDateInputBlur() {
        this.onTouch();
      }
      onStartTimeInputBlur() {
        this.onTouch();
      }
    }

    Limitations of the CVAC

    • It requires injecting NgControl. Like so
    • It requires calling super.ngOnInit from the child ngOnInit. Like so
    • At present .get('name') is not strongly typed - could be if users want it
    • All properties of a model need to have corresponding controls in a FormGroup modeled with a type. That means that Typescript will yell at you if you don't give it a FormControl for each and every property in the model. It's a restriction that's there by design, although I can see how it would sadden someone reusing the model for other things and can break their forms.
    • FormGroup inherited limitation: value on an enabled FormGroup would include only enabled fields in that FormGroup - which is what you may or may not want. See source.

    ngx-forms-typed for enterprise

    Available as part of the Tidelift Subscription.

    The maintainers of ngx-forms-typed and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.

    Install

    npm i ngx-forms-typed

    DownloadsWeekly Downloads

    623

    Version

    1.1.6

    License

    MIT

    Unpacked Size

    185 kB

    Total Files

    20

    Last publish

    Collaborators

    • gparlakov