Basic Form
For create form you have to include following dependency in your component file.
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
HTML code for basic form
<form class="register-form m-4" [formGroup]="register" (ngSubmit)="onRegister()">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-2">
<mat-form-field class="example-full-width">
<mat-label>First name </mat-label>
<input matInput formControlName="first" required>
<mat-icon matSuffix>face </mat-icon>
<mat-error *ngIf="register.get('first').hasError('required')">
First name is required
</mat-error>
</mat-form-field>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-2">
<mat-form-field class="example-full-width">
<mat-label>Last name </mat-label>
<input matInput formControlName="last">
<mat-icon matSuffix>face </mat-icon>
</mat-form-field>
</div>
</div>
</form>
component ts file have following code
register: FormGroup;
ngOnInit() {
this.register = this.fb.group({
first: ['', [Validators.required, Validators.pattern('[a-zA-Z]+')]],
last: [''],
})
}
HTML code for Outline Input Style
<form class="register-form m-4" [formGroup]="register" (ngSubmit)="onRegister()">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-2">
<mat-form-field class="example-full-width" appearance="outline">
<mat-label>First name </mat-label>
<input matInput formControlName="first" required>
<mat-icon matSuffix>face </mat-icon>
<mat-error *ngIf="register.get('first').hasError('required')">
First name is required
</mat-error>
</mat-form-field>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-2">
<mat-form-field class="example-full-width" appearance="outline">
<mat-label>Last name </mat-label>
<input matInput formControlName="last">
<mat-icon matSuffix>face </mat-icon>
</mat-form-field>
</div>
</div>
</form>
HTML code for Fill Input Style
<form class="register-form m-4" [formGroup]="register" (ngSubmit)="onRegister()">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-2">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>First name </mat-label>
<input matInput formControlName="first" required>
<mat-icon matSuffix>face </mat-icon>
<mat-error *ngIf="register.get('first').hasError('required')">
First name is required
</mat-error>
</mat-form-field>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-2">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Last name </mat-label>
<input matInput formControlName="last">
<mat-icon matSuffix>face </mat-icon>
</mat-form-field>
</div>
</div>
</form>
Referral Url
Type | URL |
---|---|
Angular Form | https://angular.io/guide/forms-overview |