Angular：不显示模板驱动的表单验证错误消息

Question

I'm having trouble with the error messages on my Angular(v6) form validations. If a required field isn't filled in when the submit button is clicked, the form should not submit and there should be an error message saying that that field is required. This all works correctly except that the error message wont display. The input will highlight red, but that's it.

I would like it to have a similar effect to this example

My form looks like this:

<form name="form" class="form-horizontal" (ngSubmit)="createMPForm.form.valid && createNewMonitoringPoint()" #createMPForm="ngForm"  novalidate>
            <div class="form-group">
                <table>
                    <tbody>                      
                        <tr>                                
                            <td class="left_td">
                                <p >Monitoring Point Name *</p>
                                <input type="text" name="name" class="col-md-12 form-control"
                                    #name="ngModel" id="name"           
                                    [ngClass]="{ 'is-invalid': createMPForm.submitted && name.invalid }" required
                                    [(ngModel)]="newmp.name" onfocus="this.placeholder = ''"
                                    placeholder="e.g., A123 Outfall NW">
                            </td>

                            <td class="left_td">
                                <p>Install Date *</p>
                                <input type="date" name="installDate" class="col-md-12 form-control"
                                    #installDate="ngModel" id="installDate"  [ngClass]="{ 'is-invalid': createMPForm.submitted && installDate.invalid }" required
                                    [(ngModel)]="newmp.installDate" onfocus="this.placeholder = ''">
                            </td>
                        </tr>
                        <tr>//can't get the below portion to work
                            <td>    
                                <div *ngIf="createMPForm.submitted && name.invalid" class="invalid-feedback">
                                   <div *ngIf="name.errors.required">
                                     <p class="text-danger left_td">Name is required</p>                        
                                   </div>
                                 </div>
                            </td>
                            <td *ngIf="createMPForm.submitted && installDate.invalid" class="invalid-feedback"> 
                                <div *ngIf="installDate.errors.required">
                                  <p class="text-danger left_td">Date of installation is required</p>                              
                             </td>                                 
                         </tr>
                     </tbody>
                </table>
                         <button type="submit" value="Add Site">Create New Monitoring Point</button>
            </div>
</form>

What might I be missing?

site-settings.component.ts

import { Component, OnInit, Input, Inject } from '@angular/core';
import { AuthService } from "../../services/auth.service";
import { SiteService } from "../../services/site.service";
import { MonitoringPointService } from "../../services/monitoring- point.service";
import { Router, ActivatedRoute } from '@angular/router';
import { DateTime } from 'luxon';
import { DeviceService } from "../../services/device.service";
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';                           

@Component({
  selector: 'app-site-settings',
  templateUrl: './site-settings.component.html',
  styleUrls: ['./site-settings.component.css']
})

export class SiteSettingsComponent implements OnInit {
  newmp = {
    name: "",
    installDate: ""
  }

constructor(public deviceService: DeviceService, private formBuilder: FormBuilder, public dialog: MatDialog, private router: Router, private route: ActivatedRoute, public authService: AuthService, public siteService: SiteService, public monitoringPointService: MonitoringPointService) { }

createNewMonitoringPoint() {
    this.monitoringPointService.createNewMonitoringPoint(this.newmp, this.authService.userSession.authToken)
      .subscribe(
        data => {
          alert('Monitoring Point was edited successfully')
        }
      )
 }

Answer 1

Some opened tags are not closed with their closinng tags. You have to close <table> , <tbody> and the <div> tag after this paragraph <p class="text-danger left_td">Date of installation is required</p> . Then your code will work properly.

working stackblitz

Answer 2

I hope this HTML will work for you

<form name="form" class="form-horizontal" (ngSubmit)="createMPForm.form.valid && createNewMonitoringPoint()" #createMPForm="ngForm" novalidate>
    <div class="form-group">
        <table>
            <tbody>
                <tr>
                    <td class="left_td">
                        <p>Monitoring Point Name *</p>
                        <input type="text" name="name" class="col-md-12 form-control" #name="ngModel" id="name" [ngClass]="{ 'is-invalid': createMPForm.submitted && name.invalid }" required [(ngModel)]="newmp.name" onfocus="this.placeholder = ''" placeholder="e.g., A123 Outfall NW">
                    </td>

                    <td class="left_td">
                        <p>Install Date *</p>
                        <input type="date" name="installDate" class="col-md-12 form-control" #installDate="ngModel" id="installDate" [ngClass]="{ 'is-invalid': createMPForm.submitted && installDate.invalid }" required [(ngModel)]="newmp.installDate" onfocus="this.placeholder = ''">
                    </td>
                </tr>
                <tr>//can't get the below portion to work
                    <td>
                        <div *ngIf="createMPForm.submitted && name.invalid" class="invalid-feedback">
                            <div *ngIf="name.errors.required">
                                <p class="text-danger left_td">Name is required</p>
                            </div>
                        </div>
                    </td>
                    <td *ngIf="createMPForm.submitted && installDate.invalid" class="invalid-feedback">
                        <div *ngIf="installDate.errors.required">
                            <p class="text-danger left_td">Date of installation is required</p>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <button type="submit" value="Add Site">Create New Monitoring Point</button>
    </div>
</form>