Angular2/4 无法将输入字段绑定到 ngControl - 无法读取未定义的 属性 'errors'
Angular2/4 Cannot bind input field to ngControl - Cannot read property 'errors' of undefined
我有一个自定义验证器来检查输入字段中的空格,但我不明白为什么输入字段未定义给构造函数。
自定义验证组件:
import {Component} from '@angular/core';
import {FormControl, FormGroup, FormBuilder} from '@angular/forms';
import {UsernameValidators} from './usernameValidators';
@Component({
selector: 'custom-validation',
template: `
<div [formGroup]="usernameGroup">
<input type="text" placeholder="Name" formControlName="username">
<div *ngIf="username.errors.cannotContainSpace"> Without spaces! </div>
</div>
`
})
export class CustomValidationFormComponent {
usernameGroup: FormGroup;
constructor(fb: FormBuilder){
this.usernameGroup = fb.group({
username: ['', UsernameValidators.cannotContainSpace],
});
}
用户名验证器:
import {FormControl} from '@angular/forms';
export class UsernameValidators {
static cannotContainSpace(control: FormControl){
if (control.value.indexOf(' ') >= 0)
return { cannotContainSpace: true };
return null;
}
}
您的 username
formControl 不是可以直接访问的 class 变量。您可以通过 FormGroup
访问它,即 userNameGroup
.
<div *ngIf="usernameGroup.controls['username'].errors?.cannotContainSpace">
或者如 Manuel Zametter 所述:
<div *ngIf="usernameGroup.controls.username.errors?.cannotContainSpace">
?.
是安全导航运算符,如果是 undefined
或 null
,它会检查错误。
我有一个自定义验证器来检查输入字段中的空格,但我不明白为什么输入字段未定义给构造函数。
自定义验证组件:
import {Component} from '@angular/core';
import {FormControl, FormGroup, FormBuilder} from '@angular/forms';
import {UsernameValidators} from './usernameValidators';
@Component({
selector: 'custom-validation',
template: `
<div [formGroup]="usernameGroup">
<input type="text" placeholder="Name" formControlName="username">
<div *ngIf="username.errors.cannotContainSpace"> Without spaces! </div>
</div>
`
})
export class CustomValidationFormComponent {
usernameGroup: FormGroup;
constructor(fb: FormBuilder){
this.usernameGroup = fb.group({
username: ['', UsernameValidators.cannotContainSpace],
});
}
用户名验证器:
import {FormControl} from '@angular/forms';
export class UsernameValidators {
static cannotContainSpace(control: FormControl){
if (control.value.indexOf(' ') >= 0)
return { cannotContainSpace: true };
return null;
}
}
您的 username
formControl 不是可以直接访问的 class 变量。您可以通过 FormGroup
访问它,即 userNameGroup
.
<div *ngIf="usernameGroup.controls['username'].errors?.cannotContainSpace">
或者如 Manuel Zametter 所述:
<div *ngIf="usernameGroup.controls.username.errors?.cannotContainSpace">
?.
是安全导航运算符,如果是 undefined
或 null
,它会检查错误。