title: What is the best way to adapt Model/FormControl values to be shown differently in the UI control?
body: <p>Simple example:</p>
  
  <p>I have a flag in my model and would like to show it as a check box control but inverted.</p>
  
  <p>Model:</p>
  
  <pre><code>{isSupported: true}
  </code></pre>
  
  <p>Display Control:</p>
  
  <pre><code>&lt;input type="checkbox" formControlName="isSupported"&gt;Is NOT supported&lt;/input&gt;
  </code></pre>
  
  <p>So in this case I would like to show the inverted bool value in the UI input control.</p>
  
  <p><strong>Known but unsatisfying solutions:</strong></p>
  
  <ol>
  <li><p>Adapt value before/at control initialization and before submitting the form. [This adds complexity in places where it does not belong.]</p></li>
  <li><p>Adapt visualization or model to match the other. [Often not desirable.]</p></li>
  <li><p>Write a custom ControlValueAccessor. [This often will not work e.g. if a used library/framework/control like e.g. material is already using a custom ControlValueAccessor.]</p></li>
  </ol>
  
  <p>My current "solution" is to wrap the UI control and use there a proxy ControlValueAccessor which includes the required transformation. Is there a better solution for this?</p>