垫错误不显示错误消息,角度为5 [英] mat-error not displaying error message angular 5
问题描述
问题是即使我将字段留空并移至另一个字段,也不会显示错误消息.我在这里找不到我在做什么错.任何帮助将不胜感激.如果我在onFormValuesChanged()上放置一个断点,它将永远不会达到断点.我曾尝试从构造函数内部移动构建部分,但没有任何影响.我不确定更改字段值时是否触发表单的值更改事件
Problem is error message is not getting displayed even if i leave the filed blank and move to another field. I am unable to find what i am doing wrong here. Any help would be highly appreciated. if i put a breakpoints on onFormValuesChanged() it never hits the breakpoints. i have tried moving the build part of from inside the constructor but don't have any impact. I am not sure if the form's value change event is triggered or not when field value is changed
角度ver:-5.2.1
angular ver : - 5.2.1
HTML代码
<div>
<form [formGroup]="formPersonalRecord">
<mat-input-container class="full-width-input">
<input matInput placeholder="First Name" formControlname="firstName">
<mat-error *ngIf="formErrors.firstName.required">
Please provide name.
</mat-error>
</mat-input-container>
<mat-input-container class="full-width-input">
<input matInput placeholder="Last Name" formControlname="lastName">
</mat-input-container>
<mat-input-container class="full-width-input">
<input matInput placeholder="Father's Name" formControlname="fatherName">
</mat-input-container>
<mat-input-container class="full-width-input">
<input matInput placeholder="Email" formControlname="email">
<mat-error *ngIf="formErrors.email.required">
Please provide a email name.
</mat-error>
</mat-input-container>
</form>
</div>
component.cs
component.cs
import { Component, OnInit } from '@angular/core';
import { EmployeePersonalRecord } from '../employee/employee-personal-record';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { fuseAnimations } from '../../core/animations';
import { HrService } from '../hr.service';
@Component({
// tslint:disable-next-line:component-selector
selector: 'app-add-employee',
templateUrl: './add-employee.component.html',
styleUrls: ['./add-employee.component.scss'],
animations: fuseAnimations
})
export class AddEmployeeComponent implements OnInit {
employeePersonalRecord: EmployeePersonalRecord = {} as EmployeePersonalRecord;
public formPersonalRecord: FormGroup;
formErrors: any;
constructor(private builder: FormBuilder,
private service: HrService) {
}
onFormValuesChanged()
{
for ( const field in this.formErrors )
{
if ( !this.formErrors.hasOwnProperty(field) )
{
continue;
}
// Clear previous errors
this.formErrors[field] = {};
// Get the control
const control = this.formPersonalRecord.get(field);
if ( control && control.dirty && !control.valid )
{
this.formErrors[field] = control.errors;
}
}
}
ngOnInit() {
this.formPersonalRecord = this.builder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', Validators.required],
fatherName: ['', Validators.required],
dateOfBirth: ['', Validators.required],
addressPermanent: ['', Validators.required],
addressCurrent: ['', Validators.required],
gender: ['', Validators.required],
maritalStatus: ['', Validators.required],
religion: ['', Validators.required],
cast: ['', Validators.required]
});
this.formErrors = {
firstName: {},
lastName: {},
email: {},
fatherName: {},
dateOfBirth: {},
addressPermanent: {},
addressCurrent: {},
gender: {},
maritalStatus: {},
religion: {},
cast: {}
};
this.formPersonalRecord.valueChanges.subscribe(() => {
this.onFormValuesChanged();
});
}
}
推荐答案
您在formControlname上有错字.其formControlName带有大写N.
You have a typo on formControlname. Its formControlName with uppercase N.
建议:
在出现错误时,您不应添加* ngIf.垫错误的全部要点是避免这样做.
You should not add *ngIf on mat-error. The whole point of mat error is to avoid doing such thing.
,您应该使用mat-form-field组件来包装您的输入
and you should use mat-form-field component to wrap your input
所以您可以简单地尝试一下:
so can you try simply :
<form [formGroup]="formPersonalRecord">
<mat-form-field class="full-width-input">
<input matInput placeholder="First Name" formControlName="firstName" />
<mat-error>
Please provide name.
</mat-error>
</mat-form-field>
...
这篇关于垫错误不显示错误消息,角度为5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!