自定義所需的錯誤消息

我在我的輸入元素中有required，我想在那裏設置自定義錯誤消息。自定義所需的錯誤消息

這個工程： oninvalid="this.setCustomValidity('custom error')"

不過我想讀從資源的錯誤消息，這是在json文件。我正在使用i18n和ng2-translate，如果我願意，它可以正常工作： <span>{{'General.EmptySearch' | translate }}</span>它顯示我的錯誤消息。

所以如果我要做到這一點：

oninvalid="this.setCustomValidity('{{'General.EmptySearch' | translate }}')"

它說

綁定到事件屬性 'oninvalid' 是不允許出於安全原因，請使用（無效）= .. 如果'oninvalid'是一個指令輸入，請確保該指令是由當前模塊導入的。

好的我會改變它的。我做的是：

(invalid)="this.setCustomValidity('{{'General.EmptySearch' | translate }}')"

錯誤是：

得到插值（{{}}）其中預計在列24表達[this.setCustomValidity（「{{大會.EmptySearch'| translate}}'）]

怎麼了？

這裏是我的形式：

INT .ts文件

searchval: FormGroup; 
ngOnInit() { 
     this.searchval = new FormGroup({ 
      Search: new FormControl('') 
     }); 
}

和HTML

<form (ngSubmit)="onSubmit(searchval)" [formGroup]="searchval"> 
        <input type="text" class="form-control" required formControlName="Search" placeholder="{{ 'General.Search' | translate }}"> 
        <button type="submit"></button> 
</form>

來源

2017-01-24 gsiradze

有趣。在閱讀你的問題之前，我不知道有一個['無效的DOM事件]（https://developer.mozilla.org/en-US/docs/Web/Events/invalid）。因此，您正在觀看「無效」事件，並在發生此事件時設置錯誤消息，對嗎？如果是這樣，我從來沒有見過與Angular那樣做的事情。通常通過觀看字段的「錯誤」屬性來顯示錯誤。 – AngularChef

@AngularFrance是的，我試圖做到這一點。你能告訴我另一種方式嗎？我不想向用戶顯示默認錯誤消息。 – gsiradze

而你正在使用模板驅動的表單，正確嗎？（NOT model-driven forms） – AngularChef

好了，你使用的是模型驅動形式的語法。

查看official doc on form validation。它顯示瞭如何以正確的方式進行表單驗證。它還顯示瞭如何在你的代碼中有驗證信息（vs在你的模板中），這就是你的問題所在。一旦你的驗證信息在你的代碼中，你就沒有問題了。

附註：我很好奇爲什麼你想驗證你的領域，看着(invalid) DOM事件。我從來沒有見過這樣做。

來源

2017-01-24 11:06:12 AngularChef

自定義所需的錯誤消息

回答

相關問題