簡體   English   中英

如何使用 Angular 中的反應式表單更新錯誤消息對象?

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM