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

Question

我在Angular（v6）表单验证上遇到错误消息时遇到问题。 如果在单击提交按钮时未填写必填字段，则表单不应提交，并且应该显示一条错误消息，指出该字段是必需的。 这一切都正常工作，除了错误信息不会显示。 输入将突出显示红色，但就是这样。

我希望它对这个例子有类似的效果

我的表单看起来像这样：

<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>

我可能会失踪什么？

网站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

一些打开的标签没有用他们的closinng标签关闭。 您必须在此段落之后关闭<table> ， <tbody>和<div>标签<p class="text-danger left_td">Date of installation is required</p> 。 然后你的代码将正常工作。

工作stackblitz

Answer 2

我希望这个HTML对你有用

<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>