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
Run nx test shared-ui-material-forms
to execute the unit tests.
This library offers an easier way to validate forms using the Angular Material components.
import { NgServeMaterialFormsModule } from '@ngserveio/material-forms';
@NgModule({
imports: [NgServeMaterialFormsModule],
})
export class SampleModule {}
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.
<ng-serve-form-field-validation></ng-serve-form-field-validation>
Name | Type | Description |
---|---|---|
fieldName |
string | The name of the field being validated. Will be used as a default parameter to interpolate in all validation messages. e.g. Message template {{fieldName}} is required.
|
control |
AbstractControl | The control that's being validated. |
// 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>
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.
Name | Type | Description |
---|---|---|
label |
string | The label of the control and will also act as the fieldName input for the ng-form-field-validation control. |
control |
AbstractControl | The control that's being validated. |
// 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>
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.
<ng-serve-form></ng-serve-form>
Name | Type | Default Value | Description |
---|---|---|---|
saveText |
string | Save |
The save text of the button that submits the form. |
cancelText |
string | Cancel |
The cancel text of the button that cancels. |
formCssClass |
string | { [name: string]: boolean }
|
empty string | The css class for the form. |
showCancelButton |
boolean | true | Determines whether or not to show the cancel button. |
cancelDisabled |
boolean | false | Disable the cancel button. |
saveDisabled |
boolean | false | Disable the save button. |
saveButtonColor |
string | primary | The material color of the display button. |
saveButtonCss |
string | { [name: string]: boolean }
|
empty string | Determines the css for the save button. |
formGroup |
FormGroupSubmit | undefined | The form group that helps mark the form as submitted. |
Name | Type | Description |
---|---|---|
cancel |
EventEmitter<void> |
Emits when the user clicks the cancel button. |
save |
EventEmitter<void> |
Emits a save event when the form group is valid. |
// 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 Name | Required | Description |
---|---|---|
default | yes | This area MUST CONTAIN a material input control |
prefix |
no | |
suffix |
no |
These are components that allow for the display of and help of uploading files.