validate-form.component.html

<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">

	<nz-form-item>
		<nz-form-label [nzSpan]="9" nzRequired>Name</nz-form-label>
		<nz-form-control [nzSpan]="6" [nzErrorTip]="nameError">
			<input nz-input formControlName="name" placeholder="Name" />
		</nz-form-control>
		<ng-template #nameError let-control>
			<ng-container *ngIf="control.hasError('serverError')">
				{{ control.errors.serverError }}
			</ng-container>
		</ng-template>
	</nz-form-item>

	<nz-form-item>
		<nz-form-label [nzSpan]="9">Link</nz-form-label>
		<nz-form-control [nzSpan]="6" nzWarningTip="Better to add link for quick reference"
			[nzErrorTip]="linkError">
			<input nz-input formControlName="link" placeholder="Link" />
		</nz-form-control>
		<ng-template #linkError let-control>
			<ng-container *ngIf="control.hasError('serverError')">
				{{ control.errors.serverError }}
			</ng-container>
			<ng-container *ngIf="control.hasError('invalid_pattern')">
				Invalid URL
			</ng-container>
		</ng-template>
	</nz-form-item>

	<nz-form-item>
		<nz-form-label [nzSm]="9" [nzXs]="24" nzRequired>Deadline</nz-form-label>
		<nz-form-control [nzSpan]="6" [nzSm]="16" [nzXs]="24" [nzErrorTip]="deadlineError">
			<nz-date-picker formControlName="deadline" [nzFormat]="dateFormat">
			</nz-date-picker>
			<ng-template #deadlineError let-control>
				<ng-container *ngIf="control.hasError('serverError')">
					{{ control.errors.serverError }}
				</ng-container>
			</ng-template>
		</nz-form-control>
	</nz-form-item>

	<nz-form-item>
		<nz-form-label [nzSpan]="9">Contact Email</nz-form-label>
		<nz-form-control [nzSpan]="6" [nzErrorTip]="emailError">
			<input nz-input formControlName="contact_email" placeholder="Contact Email" />
			<ng-template #emailError let-control>
				<ng-container *ngIf="control.hasError('email')">
					Invalid Email
				</ng-container>
				<ng-container *ngIf="control.hasError('serverError')">
					{{ control.errors.serverError }}
				</ng-container>
			</ng-template>
		</nz-form-control>
	</nz-form-item>

</form>