角2：FormGroup：カスタムエラーメッセージを表示する方法

Question

Angular4を使用してフロントエンドを構築しています。 ユーザーがエラーのあるフォームを送信すると、エラーメッセージが表示されます。 、エラーを受信したときfield.invalidがtrueになる瞬間

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

：私はHTMLのエラーを表示する方法

// 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]; 
    } 
} 

：現時点では

は、私のエラー処理は、次のようになります空の文字列にはfield.errors.errorが含まれています。

質問：field.errors.errorメッセージを設定するにはどうすればよいですか？このメッセージは、error_message_from_server

の文字列である必要があります.HTMLコードのif文を使用してこれを解決することはオプションではありません。潜在的なエラーの数は数百にあります。 HTMLレベルで利用できるようにするためのエラー文字列の場合は、あなたのコンポーネントレベルでそれを宣言する必要が

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

：

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>