Step 1: user-settings-form.component.html file
<form #form="ngForm" (ngSubmit)="onSubmit(form)">
<div class="form-group">
<label for="name">Name</label>
<input id="name" name="name" class="form-control" [(ngModel)]="userSettings.name" required #nameField="ngModel"
[class.field-error]="form.submitted && nameField.invalid"/>
</div>
<button class="btn btn-primary">Send</button>
</form>
Step 2: user-settings-form.component.ts file
import { NgForm, NgModel } from '@angular/forms';
onSubmit(form: NgForm){
console.log('in onSubmmit: ', form.valid);
}
Step 3: user-settings-form.component.css file
.field-error{
border: 1px solid red;
}