ngx-mm v17.0.0

I develop many applications and notice a lot of repeating patterns that I decided to move to a separate library. You can see a lot of connection to PrimeNG as I mainly use it in my Angular applications. If you see potential to be used with another library, don't hesitate to use it. If you find a bug or have an idea for improvement, you can create an issue with a good description.

Versioning

x.y.z

• x - Angular version
• y - Generally add new feature(s). It can be breaking changes
• z - Fixes

Example

Installation

npm install ngx-mm --save

Components

Forms

Getting started

Import MMFormsModule to your AppModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MMFormsModule.forRoot({
      // confgiuration
    }, {
      // providers
    }),
  ],
  providers: [

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now you can use in your forms:

app.component.html

<form [formGroup]="myForm">
  <mm-form-field formControlName="username" label="Username">
    <ng-template mmFormControl let-control>
      <input [formControl]="control">
    </ng-template>
  </mm-form-field>
</form>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      username: [{value: null, disabled: false}, Validators.compose([
        Validators.required,
        Validators.minLength(3),
        Validators.maxLength(5)
      ])]
    })
  }
}

Configuration

Create your own implementation of MMErrorMessageResolver.

export class CustomMessageResolver implements MMErrorMessageResolver {
  resolveErrorMessage(key: string, value?: any, formControlName?: string | number | null): string {
    switch (key) {
      case 'required':
        return 'This field is required';
      case 'minlength':
        return `The min length of ${value.requiredLength} characters is not reached, you typed in ${value.actualLength} characters`;
      case 'maxlength':
        return `The max length of ${value.requiredLength} characters is reached, you typed in ${value.actualLength} characters`;
      default:
        return 'This field is invalid'
    }
  }
}

Provide your implementation in global configuration. Additionally, you can also configure the default style, class, and behaviors in the global configuration.

The full list of configurations can be found below

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MMFormsModule.forRoot({
      fieldClass: 'field',
      errorClass: 'text-red-900',
      showMandatory: true,
      mandatorySymbol: '#',
      invalidOnTouch: true,
      invalidOnDirty: false,
    }, {
      errorMessageResolver: CustomMessageResolver
    }),
  ],
  providers: [

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Override global configuration

You have many options for overriding the global configuration:

• by providers
• by input
• by template

By provider

Wherever you can provide providers (module, component, routes) you can override the forms configuration.

...

providers: [
  {
    provide: MM_FORMS_CONFIG,
    useValue: {}
  },
  {
    provide: MMErrorMessageResolver,
    useClass: CustomMessageResolver
  }
]

...

By input

Every possible configuration can be override by component Input (all possible inputs are below).

...

<mm-form-field formControlName="field"
               label="Username"
               class="col-12"
               [showMandatory]="false"
               mandatorySymbol="#" labelStyleClass="text-red-500"
               [invalidOnTouch]="true">
  <ng-template mmFormControl let-control>
    <input pInputText
           [formControl]="control"
           class="w-full"
           [class.ng-dirty]="control?.touched && control?.invalid"
           [class.ng-invalid]="control?.touched && control?.invalid">
  </ng-template>
</mm-form-field>

...

By template

If providers and inputs are not enough, you can use templates to modify the component (all possible templates are below).

...

<mm-form-field formControlName="field"
               label="Username"
               class="col-12"
               [showMandatory]="false"
               mandatorySymbol="#" labelStyleClass="text-red-500"
               [invalidOnTouch]="true">
  <ng-template mmFormControl let-control>
    <input pInputText
           [formControl]="control"
           class="w-full"
           [class.ng-dirty]="control?.touched && control?.invalid"
           [class.ng-invalid]="control?.touched && control?.invalid">
  </ng-template>
  <ng-template mmMmFormLabel let-label>
    MyLabel is {{label}}
  </ng-template>
</mm-form-field>

...

APIs

Inputs (properties)

Templates

mmFormControl

Template displaying form control. Required

<ng-template mmFormControl let-control></ng-template>

Context

mmFormLabel

Template displaying form label.

<ng-template mmFormLabel let-label></ng-template>

Context

mmFormMandatory

Template displaying form mandatory.

<ng-template mmFormMandatory let-mandatory></ng-template>

Context

mmFormHelper

Template displaying form helper.

<ng-template mmFormHelper let-helper></ng-template>

Context

mmFormError

Template displaying errors

<ng-template mmFormError></ng-template>

Context

Types

MMConfig

export interface MMFormsConfig {
  // Field
  fieldClass?: string;
  style?: string;
  reverseLabelControl?: boolean;

  // Label
  labelClass?: string;
  labelStyle?: string;

  // Helper
  helperClass?: string;
  helperStyle?: string;

  // Error
  errorClass?: string;
  errorStyle?: string;

  // Mandatory
  mandatoryClass?: string;
  mandatoryStyle?: string;
  mandatorySymbol?: string;
  showMandatory?: boolean;

  // Validation
  invalidOnTouch?: boolean;
  invalidOnDirty?: boolean;
}

MMErrorMessageResolver

export abstract class MMErrorMessageResolver {

  public abstract resolveErrorMessage(key: string, value?: any, formControlName?: string | null | number): string;

}