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>
							
						

Type	URL
Angular Form	https://angular.io/guide/forms-overview