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

    0.1.1 • Public • Published

    Sin

    sin

    1. an immoral act considered to be a transgression against divine law.
    2. to offend against a principle, standard, etc.
    3. a shorter synonym for error to make Angular templates less bloated

    Features

    • Less bloat in templates when displaying errors.
    • Globally configurable rule for when should an error appear.
    • Embraces reactive forms.

    Installation

    # with npm
    npm i ngx-sin
    
    # with yarn
    yarn ngx-sin
    

    Example usage

    form = this.fb.group({
      username: ['', [
        Validators.required,
        Validators.minLength(2),
        Validators.maxLength(16),
      ]],
      email: ['', [
        Validators.required,
        Validators.email,
      ]],
      password: ['', [
        Validators.required,
        Validators.minLength(4),
      ]],
    })
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
    
      <div>
        <label>
          <span>Username</span>
          <input type="text" formControlName="username">
        </label>
        <div ngxSins="username">
          <div *ngxSin="'required'">Username is required</div>
          <div *ngxSin="'minlength'">Username must be at least 2 characters long</div>
          <div *ngxSin="'maxlength'">Username must be at most 16 characters long</div>
          <div *ngxSin="'serverError'; let msg">{{ msg }}</div>
        </div>
      </div>
    
      <div>
        <label>
          <span>Email</span>
          <input type="email" formControlName="email">
        </label>
        <div ngxSins="email">
          <div *ngxSin="'required'">Email is required</div>
          <div *ngxSin="'email'">Your email seems invalid</div>
          <div *ngxSin="'serverError'; let msg">{{ msg }}</div>
        </div>
      </div>
    
      <div>
        <label>
          <span>Password</span>
          <input type="password" formControlName="password">
        </label>
        <div ngxSins="password">
          <div *ngxSin="'required'">Password is required</div>
          <div *ngxSin="'minlength'">What kind of short password is that?!</div>
          <div *ngxSin="'serverError'; let msg">{{ msg }}</div>
        </div>
      </div>
    
      <button type="submit">Register</button>
    
    </form>

    Default when function

    You can provide a when function through an input of a same name for each ngxSin directive to override the global configuration. The global configuration is provided through an object passed to .forRoot static function when importing the module.

    The config object has the following interface.

    export interface SinModuleConfig {
      when: WhenFunction;
    }

    The function you provide is used to determine when should the error be shown, based on status of the control. The signature of this function is the following.

    export interface WhenObject {
      valid: boolean
      invalid: boolean
      pending: boolean
      enabled: boolean
      disabled: boolean
      pristine: boolean
      dirty: boolean
      touched: boolean
      untouched: boolean
    }
    
    export type WhenFunction = (whenObj: WhenObject) => boolean;

    The default function is ({dirty, touched}) => dirty && touched.

    Manually triggering errors when attemting to submit invalid form

    This module deals only reducing boilerplate for the templates and centralizing the default behavior of when errors should appear. For less behavioral boilerplate, check out ngx-common-forms.

    Keywords

    none

    Install

    npm i ngx-sin

    DownloadsWeekly Downloads

    2

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • lazarljubenovic