Question

我在Angular（v6）表单验证中遇到错误消息时遇到麻烦。如果在单击“提交”按钮时未填写必填字段，则不应提交表单，并且应该显示一条错误消息，指出该字段是必填字段。除了错误消息不会显示之外，所有其他方法都可以正常工作。输入将突出显示红色，仅此而已。

我希望它具有与this example

类似的效果

我的表单如下：

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

我可能会缺少什么？

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

某些打开的标签未与其Closinng标签关闭。您必须在<table>段之后关闭<tbody>，<div>和<p class="text-danger left_td">Date of installation is required</p>标签。这样您的代码才能正常工作。

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

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

2 个答案: