title: Angular form validation how to show error message on submit
body: <p>I have a form as follows :</p>
  
  <pre><code>&lt;form [formGroup]="editProfileForm"&gt;
      &lt;input type="text" id="name" class="form-control" placeholder="First" formControlName="firstName [(ngModel)]="profileDetails.first_name"&gt;
      &lt;small class="text-danger" [hidden]="editProfileForm.controls['firstName'].valid || (editProfileForm.controls['firstName'].pristine &amp;&amp; !submitted)"&gt;First name Required&lt;/small&gt;
      &lt;input type="text" class="form-control" placeholder="Last" formControlName="lastName" [(ngModel)]="profileDetails.last_name"&gt;
      &lt;small class="text-danger" [hidden]="editProfileForm.controls['lastName'].valid || (editProfileForm.controls['lastName'].pristine &amp;&amp; !submitted)"&gt;Last name Required&lt;/small&gt;
      &lt;button class="save-changes-btn" [disabled]="(!editProfileForm.valid)" (click)="saveDetails();"&gt;Save Changes&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and the editProfile is defined in the component file as </p>
  
  <pre><code>this.editProfileForm = this.formBuilder.group({
      firstName: [_.get(this.profileDetails, 'first_name', ''), Validators.required],
      lastName: [_.get(this.profileDetails, 'last_name', ''), Validators.required],
  });
  </code></pre>
  
  <p>Now I need to show the validation messages on clicking the submit button. Here now I have disabled the submit button if, the form is not valid. But it will not show the error messages near to the corresponding fields and this will makes the user thinks that the there is nothing happening. How can I trigger the error messages to show near corresponding input fields ?</p>