Question: How do I get an angular form to behave like the example shown for jQuery at https://mdbootstrap.com/docs/jquery/forms/validation/

Yes, I can prevent the form submitting by use of *ngIf="!form.valid". In this scenario none of the form fields are highlighted as in error (required for example) unless they have been touched. i.e. the user must tab through the form field.

What I would like is that if Submit is clicked, all required fields show a message and are in red, indicating they are required.

Current behaviour is that if, after the form is displayed, the user clicks save nothing is shown on the required fields to say they are required.

If I use *ngIf="!form.valid" with the submit button, the user must move through all fields to see what is required.

Expected behavior

Form fields show as invalid.

Actual behavior

Form submits

Resources (screenshots, code snippets etc.)

My apologies but I could not get html to paste in here.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-validation',
  templateUrl: './validation.component.html',
  styleUrls: ['./validation.component.scss']
})
export class ValidationComponent implements OnInit {

  errorMessage:string;
  editForm:FormGroup;

  theFirstName: string;
  theLastName: string;

  constructor(public fb: FormBuilder) { 
    this.editForm = this.fb.group({
      firstName: new FormControl(null,[Validators.required]),
      lastName: new FormControl(null,[Validators.required])
    });
  }

  ngOnInit() {
    console.log("validation ngOnInit");
  }

  get firstName() { return this.editForm.get('firstName'); };
  get lastName() { return this.editForm.get('lastName'); };


  save(){
    if(this.editForm.valid){
      this.errorMessage = "Valid";
    }
    else{
      this.errorMessage = "InValid";
    }

  }
}

This is the result of clicking Save without entering the input fields. This is the result of clicking Save after entering the input fields.

When I click save, without entering data, I would like the result as shown in the second image.

What should I be doing that I am missing?

Thanks in advance ;)