【发布时间】：2019-04-30 20:53:54
【问题描述】：
我的 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')
}
)
}
【问题讨论】：
-
嗨@laurenah，请您与.ts 文件共享整个代码吗？
-
您还没有关闭一些打开的标签，
<table>和<tbody>。你能分享一下ts文件吗？ -
@HardikMasalawala 当然，添加了 .ts 代码
-
请尝试@DenukaNirmalee 解决方案
标签： angular forms validation