@ngserveio/material-forms v8.0.0

@ngserveio/material-forms

Find more at libraries and examples at NgServe.io.

Read More At: Angular Tutorial - Part 1: Reusable Validation Messages Angular Material Tutorial - Part 2: Creating a Reusable Form Field Component

See the Video Tutorial on YouTube

Running unit tests

Run nx test shared-ui-material-forms to execute the unit tests.

Purpose

This library offers an easier way to validate forms using the Angular Material components.

Import the NgServeMaterialFormsModule

import { NgServeMaterialFormsModule } from '@ngserveio/material-forms';
@NgModule({
  imports: [NgServeMaterialFormsModule],
})
export class SampleModule {}

Form Field Validation Component

Displays the validations messages set on a particular control. Please refer to Validation Error Messages Service for customizing and interpolation of validation messages. This component in conjunction with Validation Display Messages avoids the need for duplicative markup.

Selector

<ng-serve-form-field-validation></ng-serve-form-field-validation>

Inputs

Example

// Sample Component
import { Validators } from '@angular/forms';
import { FormGroupSubmit } from '@ngserveio/form-services';

@Component({
  template: 'sample-component',
})
export class SampleComponent {
  public formSamples = new FormGroupSubmit({
    firstName: new FormControl('', [Validators.required]),
  });

  public get firstName(): AbstractControl {
    return this.formSamples.get('firstName');
  }
}

<form [formGroup]="formSamples">
  <!-- Please note the firstName name here is a string as a key in the formSamples formGroup -->
  <input type="text" formControlName="firstName" />

  <!-- firstName is the AbstractControl reference in the component code -->
  <ng-serve-form-field-validation [control]="firstName" fieldName="First Name">
  </ng-serve-form-field-validation>
</form>

Form Field

The form field allows you to write less markup for displaying the label and validation and display the projected form field. Please not that the field must be of a MatFormField type.

Inputs

Example

// Sample Component
import { Validators } from '@angular/forms';
import { FormGroupSubmit } from '@ngserveio/material-forms';

@Component({
  template: 'sample-component',
})
export class SampleComponent {
  public formSamples = new FormGroupSubmit({
    firstName: new FormControl('', [Validators.required]),
  });

  public get firstName(): AbstractControl {
    return this.formSamples.get('firstName');
  }
}

<!-- Sample Component Markup -->

<form [formGroup]="formSamples">
  <ng-serve-form-field [control]="firstName" label="First Name">
    <input matInput type="text" formControlName="firstName">
  <ng-serve-form-field>
</form>

Form

The form works in conjunction with the FormGroupSubmit. On submit of the form, the formGroup submit will mark FormGroupSubmit as submitted so validations can display based on whether or not the user has tried to submit the form.

Selector

<ng-serve-form></ng-serve-form>

Inputs

Outputs

Example

// Sample Component
import { Validators } from '@angular/forms';
import { FormGroupSubmit } from '@ngserveio/material-forms';

@Component({
  template: 'sample-component',
})
export class SampleComponent {
  public formSamples = new FormGroupSubmit({
    firstName: new FormControl('', [Validators.required]),
  });

  public save(): void {
    console.log(this.formSamples.value);
  }

  public cancel(): void {
    console.log("I've been canceled!  Seems to be the culture.");
  }

  public get firstName(): AbstractControl {
    return this.formSamples.get('firstName');
  }
}

<ng-serve-form [formGroup]="formSamples" (save)="save()" (cancel)="cancel()">
  <ng-serve-form-field [control]="firstName" label="First Name">
    <input matInput type="text" formControlName="firstName">
  <ng-serve-form-field>
</ng-serve-form>

Content Projection

ChangeLog.md

File Upload Components

These are components that allow for the display of and help of uploading files.