reactive-form.html

<div class="card">
	<div class="card-header">Reactive form</div>
	<div class="card-body">
		<form [formGroup]="form" (ngSubmit)="onSubmit()">
			<div class="form-group">
				<label>Name *</label>
				<input placeholder="Enter your name" type="text" formControlName="name" class="form-control" [ngClass]="{ 'is-invalid': form.get('name').errors && form.get('name').touched }"
				/>
				<div *ngIf="form.get('name').errors && form.get('name').touched" class="invalid-feedback">
					<div *ngIf="form.get('name').errors['required']">This field is required</div>
				</div>
			</div>
			<div class="form-group">
				<label>Email *</label>
				<input placeholder="Enter your email" type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': form.get('email').errors && form.get('email').touched }"
				/>
				<div *ngIf="form.get('email').errors && form.get('email').touched " class="invalid-feedback">
					<div *ngIf="form.get('email').errors['required']">This field is required</div>
				</div>
			</div>
			<div class="form-group">
				<label for="contry">Countries *</label>
				<select class="form-control" id="contry" formControlName="country" [ngClass]="{ 'is-invalid': form.get('country').errors && form.get('country').touched }">
          <option *ngFor="let contry of countries" [value]="contry.value">{{contry.label}}</option>
        </select>
				<div *ngIf="form.get('country').errors && form.get('country').touched " class="invalid-feedback">
					<div *ngIf="form.get('country').errors['required']">This field is required</div>
				</div>
			</div>
			<div class="form-group">
				<label>Message *</label>
				<textarea formControlName="message" rows="5" placeholder="Enter a message" class="form-control" [ngClass]="{ 'is-invalid': form.get('message').errors && form.get('message').touched }">
        </textarea>
				<div *ngIf="form.get('message').errors && form.get('message').touched" class="invalid-feedback">
					<div *ngIf="form.get('message').errors['required']">This field is required</div>
				</div>
			</div>

			<button type="submit" class="btn btn-success" [disabled]="!form.valid">
          Submit
        </button>
		</form>
	</div>
	<div class="card-body">
		<h4>Results</h4>
	</div>
	<ul class="list-group list-group-flush">
		<li class="list-group-item">{{ model | json }}</li>
	</ul>
</div>