title: Angular 2: FormGroup: How to display custom error message
body: <p>Im building a frontend using Angular4. 
  If a user submits a faulty form, an error message should be displayed. </p>
  
  <p>At the moment, my error handling looks like this:</p>
  
  <pre><code>// 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];
      }
  }
  </code></pre>
  
  <p>How I display the error in HTML:</p>
  
  <pre><code>&lt;span class="error" *ngIf="field.invalid"&gt;Error: {{field.errors.error}} &lt;br&gt;&lt;/span&gt;
  </code></pre>
  
  <p>At the moment the <code>field.invalid</code> becomes true when a error is received, but the <code>field.errors.error</code> in an empty string.</p>
  
  <p><strong>Question:</strong> How can I set the <code>field.errors.error</code> message? This message should be the string in <code>error_message_from_server</code></p>
  
  <p>Please note that solving this by the use of if-statements in the HTML code is not an option. The amount of potential errors are in the hundreds.</p>