Angular 2：FormGroup：如何顯示自定義錯誤消息

Question

Im使用Angular4構建前端。 如果用戶提交錯誤表單，則應顯示錯誤消息。

此刻，我的錯誤處理是這樣的：

// This code is run when a response from the server is received 
if ('error' in server_response) { 
    for (let key in server_response.error { 
     this.form.controls[key].setErrors({'error': true}); 
     let error_message_from_server = server_response.error[key]; 
    } 
} 

如何顯示HTML錯誤：接收到錯誤時

<span class="error" *ngIf="field.invalid">Error: {{field.errors.error}} <br></span> 

目前的field.invalid爲真，但field.errors.error中有一個空字符串。

問題：如何設置field.errors.error消息？此消息應爲error_message_from_server

中的字符串請注意，通過在HTML代碼中使用if語句解決此問題不是一種選擇。潛在的錯誤數量在幾百。

Answer 1

this.form.controls[key].setErrors({'error': true}); //關鍵是錯誤值布爾不是串

嘗試設置一個字符串類型值

for (let key in server_response.error { 
    this.form.controls[key].setErrors({'error': erver_response.error[key]}); 
//Calling `setErrors` will also update the validity of the parent control. 
} 

Answer 2

對於錯誤字符串可用在HTML水平，你必須聲明它在你的組件級：

error_message_from_server: string;

然後，從服務器的響應，您將消息發送到字符串：

// This code is run when a response from the server is received 
if ('error' in server_response) { 
    for (let key in server_response.error { 
     this.form.controls[key].setErrors({'error': true}); 
     error_message_from_server = server_response.error[key]; 
    } 
} 

然後將字符串綁定到你的元素：

<span class="error" *ngIf="field.invalid">Error: {{error_message_from_server}} <br></span>