register.component.html

<div class="registerPage">
    <div class="content">
        <div class="title">
            <div class=vertical></div>
            <div>REGISTER FOR WCP</div>
        </div>
        <div class="inputs">
            <form class="example-form">
                <mat-form-field class="example-full-width" hideRequiredMarker>
                    <input matInput required>
                    <mat-placeholder class="placeholder">Name</mat-placeholder>
                </mat-form-field>
                <mat-form-field class="example-full-width" hideRequiredMarker>
                    <input matInput required>
                    <mat-placeholder class="placeholder">Reg. No.</mat-placeholder>
                </mat-form-field>
                <mat-form-field class="example-full-width" hideRequiredMarker>
                    <input matInput required type="password">
                    <mat-placeholder class="placeholder">Password</mat-placeholder>
                </mat-form-field>
                <mat-form-field class="example-full-width" hideRequiredMarker>
                    <input matInput required type="password">
                    <mat-placeholder class="placeholder">Confirm Password</mat-placeholder>
                </mat-form-field>
                <!-- <mat-form-field>
                    <input type="password" matInput formControlName='password'>
                    <mat-placeholder class="placeholder">Password</mat-placeholder>
                </mat-form-field>
                <mat-form-field>
                    <input type="password" matInput formControlName='verifyPassword' [errorStateMatcher]="errorMatcher">
                    <mat-placeholder class="placeholder">Verify Password</mat-placeholder>

                    <mat-error *ngIf="userForm.hasError('passwordsDoNotMatch')">
                        Passwords do not match!
                    </mat-error>
                </mat-form-field> -->
                <mat-form-field class="example-full-width" hideRequiredMarker>
                    <input matInput required>
                    <mat-placeholder class="placeholder">Program</mat-placeholder>
                </mat-form-field>
                <mat-form-field class="example-full-width" hideRequiredMarker>
                    <input matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher" required>
                    <mat-placeholder class="placeholder">Email</mat-placeholder>
                    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
                        Please enter a valid email address
                    </mat-error>
                    <mat-error *ngIf="emailFormControl.hasError('required')">
                        Email is <strong>required</strong>
                    </mat-error>
                </mat-form-field>
                <mat-form-field class="example-full-width" hideRequiredMarker>
                    <input matInput type="number" required>
                    <mat-placeholder class="placeholder">Phone no.</mat-placeholder>
                </mat-form-field>
            </form>
            <div class="register">
                <button class="controlButton">REGISTER ME</button>
            </div>
        </div>
    </div>
</div>