Installation

npm install @ng-modular-forms/material

Note: This will also install @ng-modular-forms/core.

Styles Setup

Add the global styles to your application's angular.json file under the styles array:

"styles": [
  "src/styles.css",
  "node_modules/@ng-modular-forms/material/styles/form-controls.css"
]

Global configuration

Material controls can be configured globally using provideNmfMaterialConfig.

This configuration only affects visual behavior of Material components.

Available options

appearance: MatFormFieldAppearance;
floatLabel: FloatLabelType;
detachLabels: boolean;
hideRequiredMarker: boolean;

Example

import { ApplicationConfig } from '@angular/core';
import { provideNmfMaterialConfig } from '@ng-modular-forms/material';

export const appConfig: ApplicationConfig = {
  providers: [
    provideNmfMaterialConfig({
      floatLabel: 'always',
      appearance: 'outline',
    }),
  ],
};

Translation

Translation is handled globally by @ng-modular-forms/core. This includes validation messages.

Material components automatically use the core configuration.

Usage Example

import { MatInputTextComponent } from "@ng-modular-forms/material";

@Component({
  template: `
    <form [formGroup]="form" (ngSubmit)="submit()">
      <nmf-mat-text formControlName="fieldA" label="Field A" />
      <nmf-mat-text formControlName="fieldB" label="Field B" />

      <button type="submit">Submit</button>
    </form>
  `,
})
export class ExampleComponent {
  form = new FormGroup({
    fieldA: new FormControl(null),
    fieldB: new FormControl(null),
  });
}

Available Input Components

All components share a consistent API and are interchangeable between Native and Material implementations without changing form logic.

Prefixes / Suffixes are enabled for text and number fields, allowing number to double as a currency field.

| Input Type | Selector | |-----------------|-----------------------| | Text / Password | nmf-mat-text | | Lookup | nmf-mat-lookup | | Number | nmf-mat-number | | Date | nmf-mat-datepicker | | Select | nmf-mat-select | | Textarea | nmf-mat-textarea | | Time | nmf-mat-timepicker |

Built On

• Angular Reactive Forms
• Angular Material
• ControlValueAccessor (CVA)
• Standalone Components
• RxJS

Features

• Reusable Angular Material form controls
• Typed reactive forms support
• Built-in ControlValueAccessor integration
• Consistent validation and error handling
• Loading and disabled states
• Standalone component support
• Reduced reactive forms boilerplate
• Enterprise-ready form architecture

Requires

• @ng-modular-forms/core
• @angular/material
• @angular/cdk

License

MIT