ngx-mm is an Angular developers toolkit for simplified Angular application development

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

Angular	ngx-mm	Comments
14.x	14.x.x	...
15.x	15.x.x	...
15.x	15.x.2	Fix to suppor
15.x	15.2.x	Breaking changes or add new feature

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)

Name	Type	Default	Description
label	string	''	Form field label
id	string	''	Unique identifier of form field ("for" use case)
helper	string	''	Help text for form field
invalidOnTouch	boolean	true	Show invalid state when form field is touched (use invalidOnTouch or invalidOnDirty not both)
invalidOnDirty	boolean	false	Show invalid state when form field is dirty (use invalidOnTouch or invalidOnDirty not both)
reverseLabelControl	boolean	false	Reverse order of label and control form
style	string	''	Inline style of field
styleClass	string	'field'	Style class of field
labelStyle	string	''	Inline style of label
labelStyleClass	string	''	Style class of label
helperStyle	string	''	Inline style of helper
helperStyleClass	string	''	Style class of helper
errorStyle	string	''	Inline style of error
errorStyleClass	string	''	Style class of error
mandatorySymbol	string	*	Symbol of mandatory
mandatoryStyle	string	''	Inline style of mandatory
mandatoryClass	string	''	Style class of mandatory
showMandatroy	boolean	true	When present show mandatory symbol if form contorol has required validator

Templates

mmFormControl

Template displaying form control. Required

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

Context

Name	Type	Implicit
control	AbstractControl	true

mmFormLabel

Template displaying form label.

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

Context

Name	Type	Implicit
label	string	true
id	string	false
mandatory	boolean	false
showMandatory	boolean	false
mandatorySymbol	string	false

mmFormMandatory

Template displaying form mandatory.

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

Context

Name	Type	Implicit
mandatory	boolean	true
showMandatory	boolean	false
mandatorySymbol	string	false

mmFormHelper

Template displaying form helper.

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

Context

Name	Type	Implicit
helper	string	true

mmFormError

Template displaying errors

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

Context

Name	Type	Implicit
message	string	true
key	string	false
value	string	false
controlName	string	false

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;

}