Updated March 29, 2023
Definition on Angular Material Form Example
Angular material form example contains the form which was we have developing in a web application. Basically mat form field component is used to wrap the angular material component and applying the text field style which was common field text styles such as hint messages and underline. The form field will referring the component of wrapper and control of form field will referring the component which was we have wrapping.
How To Create angular material form?
- We can use number of features from the angular material form which was used with the component of select. This is 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.
- Native control will contains the accessibility, performance and advantages of usability. Use of native select inside will importing the input module and adding the native control attribute into the select element.
- The mat-select and select will supporting to directive of form and reactive forms module. With the native module select is also supporting to the compareWith function.
- Below steps shows how to create the angular material form are as follows. To configure the angular material form project we need to install angular material CLI in our system. Below example shows that to install angular material CLI.
- To create angular material form we need to install the angular CLI in our system. We can install the angular material CLI by using npm command.
npm install -g @angular/cli
2. After installing the angular CLI in this step we are creating the workspace for our angular project. We are creating workspace name as angular-material-form1. Below example shows to create workspace of our angular project are as follows. We are adding angular routing this option will pop up at the time of creating a workspace. Also we are selecting the stylesheet format as CSS.
ng new angular-material-form1
3. After creating the workspace of angular material form project in this step we are installing the angular CDK, angular animations and angular material are as follows.
npm install @angular/material –save
4. After installing angular material, cdk and animation in this step we are adding the same in our project are as follows. Below example shows add the angular material library are as follows.
cd angular-material-form1/ng add @angular/material
5. Now we are replacing the existing code into the material.module.ts file are as follows.
Code –
import { NgModule } from '@angular/core';
……
@NgModule({
declarations: [],
imports: [
CommonModule,
MatTableModule,
MatSortModule,
MatFormFieldModule,
MatInputModule,
MatDatepickerModule,
MatNativeDateModule,
MatIconModule,
MatSelectModule,
MatRadioModule,
MatButtonModule,
],
exports: [
CommonModule,
MatTableModule,
MatSortModule,
MatFormFieldModule,
MatInputModule,
MatDatepickerModule,
MatNativeDateModule,
MatIconModule,
MatSelectModule,
MatRadioModule,
MatButtonModule
]
})
export class NgMaterialModule { }
6. Now we are importing all the module into the module material file which was custom. Keeping modules separate angular material is very easy to maintain. In below example we are importing the material module and form module which was reactive are as follows.
Code –
import { NgMaterialModule } from './ng-material/ng-material.module';
@NgModule({
......
imports: [
...
NgMaterialModule,
], } )
- In AngularJS we can create a form which is used inside into the mat form field. It is useful after creating a component which will sharing multiple behaviour by using form field. To use form field of angular material in our project we need to add component with matFormFieldControl interface.
Angular Material Form Design Example
- Below example shows angular material form design example are as follows. First we are creating the workspace for our angular project. We are creating workspace name as angular-material-form2. Below example shows to create workspace of our angular project are as follows. We are adding angular routing this option will pop up at the time of creating a workspace. Also we are selecting the stylesheet format as CSS.
ng new angular-material-form2
- Now we are adding the library in our project are as follows. Below example shows add the angular material library are as follows.
cd angular-material-form2/ng add @angular/material
- To create example of angular material form in our typescript we need rule of angular material validation. In below example we are creating the form and adding the validation into the app.component.ts file.
Code –
@Component ({
Selector : 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {
form: FormGroup;
constructor (private fb: FormBuilder) { }
ngOnInit (): void {
this.form = this.fb.group ({
name: [null, [Validators.required]],
email: [null, [Validators.required, Validators.pattern ("^[a-z0-9")]],
dob: [null, [Validators.required]],
address: [null],
country: [null],
gender: [null],
});
}
saveDetails(form) {
alert ('Form Validated)' + JSON.stringify(form.value, null, 4));
} }
- In above example required attribute is used to specify the value which was provided. We can also use minlength attribute to specify the min number of char. We can also use maxlength attribute to specify the max number of char. We are using pattern attribute for specifying the regular expression that the provided value is match.
- Now we are adding the component of material form in our template. We are using multiple component in template. The mat-form-field component is used to wrap the component of angular and apply the style of text field. The label component is allowing form field as optional property. Mat select component is used to select value from the multiple options. Mat radio button is providing same functionality which was provided by radio button.
Code –
<div class="container">
<form [formGroup] = "form" (ngSubmit) = "saveDetails(form)">
<mat-form-field appearance = "standard">
<mat-label> Name </mat-label>
<input matInput maxlength = "15" inputmode = "tel" placeholder = "Type name" formControlName = "name" #nameInput>
……
</div>
</form>
<div>{{ form.value | json }}</div>
</div>
Conclusion
We can use number of features from the angular material form which was used with the component of select. Basically mat form field component is used to wrap the angular material component and applying the text field style which was common field text styles such as hint messages and underline.
Recommended Articles
This is a guide to Angular Material Form Example. Here we discuss the Definition, overviews, How To Create angular material form, Examples with code implementation respectively. You may also have a look at the following articles to learn more –
