Angular Material Form

Updated March 29, 2023

Definition of Angular Material Form

Angular material form is used to wrap the several material components of angular and apply the test field which was common like the floating label, a hint of messages, and underlines. Basically form field is referring the component of the wrapper. We can write the component as mat-form-field, there are multiple material components we need to use at the time of designing the application.

Overview of Angular Material Form

• We are using mat-select form control for selecting values from the set of options which was similar to the element of native select.
• Each mat-option will contain the value property which was used to set the values which were selected when the user will chooses the specified option. All the content of the mat option will show by the user.
• As we know that angular material will support to the select element which was native and which is inside the mat-form-field component.
• Native control will contain the accessibility, performance, and advantages of usability. Use of native select inside will import the mat input module and add the mat native control attribute into the select element.
• The mat-select and select will support to the directive of the form of core and reactive forms module. The native module select and mat-select is also supporting to the compareWith function.
• We can use a number of features from the mat form filed which was used with the component of select and mat-select. This includes the prefix, suffix, theming and error messages.
• For adding options into the select we need to add mat-option elements into the element of mat-select.

Angular Material Form Field

• We can use angular material form field to develop web application in AngularJS. It is component of angular material.
• We can use below angular material to develop web application by using angular material for field are as follows.
• <input matNativeControl>
• <textarea matNativeControl>
• <mat-select>
• <select matNativeControl>
• <mat chip-list>
• The mat-form-field will support four 4 different variances. Outline and fill appearances will implement the spec current version. Fill appearances will display the field of form by using the field background box. The outline appearances will show the form field with a border.
• The standard and legacy appearances are implementing the old version of the spec where the mat-form-field will show in underline.
• We can recommend using the prefix and suffixes in the outline and fill attributes is used in a conjunction with floatLabel options.
• In AngularJS it is possible to create a form field control that was used inside into the mat form field. It is useful after creating a component that will be sharing multiple common behavior by using the form field after adding the logic into it.
• We need to add a component with matFormFieldControl interface.

Code:

@Component({

    providers: [{provide: MatFormFieldControl, useExisting: MyTelInput}],

})

export class MyTelInput implements MatFormFieldControl <MyTel> {

}

• This component is working with mat-form-field. But we can implement the various methods.
• We can also use the value property which will allow us to get value from our control.

Angular material form Field Examples

• First, we are creating a new project of the angular material form field.
• To create an example we need to install the Angular CLI in our system.

npm install -g @angular/cli

• Now we are creating workspace name as angular-material-formfield. The below example shows to create the workspace of our angular project are as follows. We are adding an angular routing option and selecting the stylesheet format as CSS.

ng new angular-material-formfield

• After creating the workspace of angular material from the field project in this step we are installing the angular CDK, angular animations and angular material are as follows.

npm install @angular/material –save

• After installing angular material, cdk, and animation in this step we are adding the same in our project are as follows. The below example shows add the angular material library is as follows.

cd angular-material-formfield/

ng add @angular/material

• Adding code in app.module.ts file. We are replacing the existing code with the below code.

Code:

import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatIconModule } from '@angular/material/icon';
……
MatRadioModule,
MatButtonModule,
MatIconModule,
MatSelectModule,
]
})
export class NgMaterialModule { }

• Adding code in app.component.ts file.

Code:

import {

@Component ({

selector: 'app-form'

……….

saveDetails (form) {

alert ('SUCCESS Message!! :-)\n\n' + JSON.stringify (form.value, null, 6));

}

• Adding code in app.component.ts file.

Code:

<div class="container">
………..
<div>{{ form.value | json }}</div>
</div>

Angular Material Form Examples

• First, we are creating a new project.
• We are creating a workspace name as angular-material-form. The below example shows to creation the workspace of our angular project. We are adding an angular routing option and selecting the stylesheet format as CSS.

ng new angular-material-form

• After installing angular material, cdk, and animation in this step we are adding the same in our project as follows. The below example shows add the angular material library is as follows.

cd angular-material-form/

ng add @angular/material

• Adding code in app.component.ts file.

Code:

import
{
…….
alert('SUCCESS Message!! :-)\n\n' + JSON.stringify(form.value, null, 4));
}

• Adding code in app.component.html file.

Code:

<mat-card>

<mat-card-title>Login</mat-card-title>

………

</form>

</mat-card-content>

</mat-card>

Figure – Example to add code into app.component.html file and output of the project.

Conclusion

For adding options into the select we need to add mat-option elements into the element of mat-select. Angular material form is used to wrap the several material components of angular and apply the test field which was common like the floating label, a hint of messages, and underlines.

Recommended Article

This is a guide to Angular Material Form. Here we discuss the Definition, overviews, Angular Material Form Field, and examples with code implementation respectively. You may also have a look at the following articles to learn more –

1. Angular Material Grid
2. Angular material radio button
3. Angular material template
4. Angular Material NPM