![](/img/trans.png)
[英]error TS2531 Object is possibly 'null' in angular reactive forms
[英]How to update error messages object with Reactive forms in Angular?
這是我的代碼
public errorMessages;
ngOnInit(): void {
this.startErrorMessage();
}
private startErrorMessage() {
this.errorMessages = maxLength: this.translate.instant('util.maxLength', {
maxL: this.form?.controls?.firstName?.errors ? 10 : 20
})
}
然后在 html 中:
<p *ngIf="form?.controls?.firstName?.errors">
{{ form?.controls?.firstName?.errors | showErrorMessage: errorMessages }}
/p>
這里的問題是this.errorMessages
只檢查一次,這意味着它總是返回20
用於maxL
字段中的三元檢查,因為第一個值總是null
。
我試過聽變化,像這樣:
private listenToChanges() {
this.form.controls.firstName.valueChanges.subscribe(() => {
this.startErrorMessage();
}
}
並將listenToChanges()
放在ngOnInit()
但這會引入一些其他錯誤,同時確實修復了其中一些錯誤。 另外,感覺不太對勁。
這里的好方法是什么? 我怎樣才能使this.errorMessages
更新? 這里有什么好的做法?
編輯:
private startForm() {
this.form = this.fb.group({
firstName: [
{ value: '', disabled: true },
[
Validators.required,
Validators.maxLength(10),
],
})
對於自定義驗證器,您應該提及如下:
private startForm() {
this.form = this.fb.group({
firstName: [
{ value: '', disabled: true },
[
Validators.required,
Validators.maxLength(10),
customfunction() // your validation logic mention here. write a function/directive call it here
],
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.