У меня проблемы с сообщениями об ошибках в моей проверке формы 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>
Чего мне не хватает?
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')
}
)
}