This can be achieved with the sample presented here, where you can make use of NgForm
directive:
<form [formGroup]="heroForm" #formDir="ngForm">
and then in your validation messages just check if the form is submitted:
<small *ngIf="heroForm.hasError('required', 'formCtrlName') && formDir.submitted">
Required!
</small>
EDIT: Now is also { updateOn: 'submit'}
is provided, but that works only if you do not have required
on the form, as required
is displayed initially anyway. You can suppress that with checking if field has been touched though.
// fb is 'FormBuilder'
this.heroForm = this.fb.group({
// ...
}, { updateOn: 'submit'})