Angular 6 Forms TypeError: Cannot read property 'valid' of null
Angular 6 Forms TypeError: Cannot read property 'valid' of null
我有一个带有两个 FormControl 的简单表单,我在其中订阅了所有 valueChanges。但是在检查错误时我得到这个错误:
请注意,我首先能够记录输入,但之后是 null
.
打字稿
export class Component {
@Input() product: Product;
form: FormGroup;
errors: any;
messages: any;
constructor(
private fb: FormBuilder,
) { }
ngOnInit(): void {
this.setupMessages();
this.form = this.fb.group({
name: ['', [
Validators.required,
Validators.minLength(3),
Validators.maxLength(100),
]],
description: ['', [
Validators.maxLength(10000),
]],
});
this.form.patchValue(this.product);
this.form.valueChanges.subscribe(data => this.checkErrors());
}
private checkErrors(): void {
for (let field in this.errors) {
this.errors[field] = '';
let input = this.form.get(field);
// I am able to log input
// but input.valid is null
if (!input.valid) {
for (let error in input.errors) {
this.errors[field] = this.messages[field][error];
}
}
}
}
private setupMessages(): void {
this.messages = {
name: {
required: 'Please give your product an awesome name',
minlength: 'The name should be longer than 3 characters',
maxlength: 'Keep your product name under 100 characters',
},
description: {
maxlength: 'Your description is to long',
},
}
this.errors = {
name: '',
descripton: '',
}
}
}
HTML
<form [formGroup]="form">
<dy-input
[required]="true"
[placeholder]="'Give your product an awesome name'"
formControlName="name"
[error]="errors.name"
[maxlength]="100"
>
Name
</dy-input>
<dy-textarea
[placeholder]="'Pointing out details helps to improve sales'"
[error]="errors.description"
formControlName="description"
[height]="'480px'"
[maxlength]="10000"
>
Description
</dy-textarea>
</form>
如您所见,我正在使用自己的自定义表单控件。但我很确定,问题不是由它们引起的,因为它们不会以其他形式引起任何错误。
第二次,您的输入 是 空值,因为您的错误中有错别字。
private setupMessages(): void {
this.messages = {
name: {
required: 'Please give your product an awesome name',
minlength: 'The name should be longer than 3 characters',
maxlength: 'Keep your product name under 100 characters',
},
description: {
maxlength: 'Your description is to long',
},
}
this.errors = {
name: '',
descripton: '',
}
}
请注意,在 this.errors
中,您有一个名为 descripton 的错误键,但您的表单组键是 description(拼写正确)。
您在 this.errors
版本中缺少 i。
此外,除了我上面的评论之外,也许值得将您的条件编辑为 if (input && !input.valid)
以确保安全 :)
我有一个带有两个 FormControl 的简单表单,我在其中订阅了所有 valueChanges。但是在检查错误时我得到这个错误:null
.
打字稿
export class Component {
@Input() product: Product;
form: FormGroup;
errors: any;
messages: any;
constructor(
private fb: FormBuilder,
) { }
ngOnInit(): void {
this.setupMessages();
this.form = this.fb.group({
name: ['', [
Validators.required,
Validators.minLength(3),
Validators.maxLength(100),
]],
description: ['', [
Validators.maxLength(10000),
]],
});
this.form.patchValue(this.product);
this.form.valueChanges.subscribe(data => this.checkErrors());
}
private checkErrors(): void {
for (let field in this.errors) {
this.errors[field] = '';
let input = this.form.get(field);
// I am able to log input
// but input.valid is null
if (!input.valid) {
for (let error in input.errors) {
this.errors[field] = this.messages[field][error];
}
}
}
}
private setupMessages(): void {
this.messages = {
name: {
required: 'Please give your product an awesome name',
minlength: 'The name should be longer than 3 characters',
maxlength: 'Keep your product name under 100 characters',
},
description: {
maxlength: 'Your description is to long',
},
}
this.errors = {
name: '',
descripton: '',
}
}
}
HTML
<form [formGroup]="form">
<dy-input
[required]="true"
[placeholder]="'Give your product an awesome name'"
formControlName="name"
[error]="errors.name"
[maxlength]="100"
>
Name
</dy-input>
<dy-textarea
[placeholder]="'Pointing out details helps to improve sales'"
[error]="errors.description"
formControlName="description"
[height]="'480px'"
[maxlength]="10000"
>
Description
</dy-textarea>
</form>
如您所见,我正在使用自己的自定义表单控件。但我很确定,问题不是由它们引起的,因为它们不会以其他形式引起任何错误。
第二次,您的输入 是 空值,因为您的错误中有错别字。
private setupMessages(): void {
this.messages = {
name: {
required: 'Please give your product an awesome name',
minlength: 'The name should be longer than 3 characters',
maxlength: 'Keep your product name under 100 characters',
},
description: {
maxlength: 'Your description is to long',
},
}
this.errors = {
name: '',
descripton: '',
}
}
请注意,在 this.errors
中,您有一个名为 descripton 的错误键,但您的表单组键是 description(拼写正确)。
您在 this.errors
版本中缺少 i。
此外,除了我上面的评论之外,也许值得将您的条件编辑为 if (input && !input.valid)
以确保安全 :)