title: what is the proper way to dynamically mark a field as required using Angular 2 Forms?
body: <p>Using Angular 2 (2.0.0), what is the recommended way to <em>dynamically</em> mark a field as required, using <a href="https://angular.io/docs/ts/latest/guide/forms.html" rel="noreferrer">Angular Forms</a>?</p>
  
  <p>In all of their examples, the required attribute is just added like:</p>
  
  <pre><code>&lt;input type="text" class="form-control" id="name" required&gt;
  </code></pre>
  
  <p>What if the model I'm binding to has an <code>IsRequired</code> property, that will be true/false?</p>
  
  <p>If I use something like:</p>
  
  <pre><code>&lt;input [(ngModel)]="field.Value" type="text" value="{{field.Value}}" [attr.required]="field.IsRequired"/&gt;
  </code></pre>
  
  <p>That renders on the page like (note the <strong>="true"</strong>):</p>
  
  <pre><code>&lt;input type="text" required="true" /&gt;
  </code></pre>
  
  <p>For some reason, Angular doesn't appear to recognize this attribute when it has an actual value (the <em>="true"</em>) so when this field is blank, my form itself still is valid:</p>
  
  <pre><code>&lt;form class="ng-untouched ng-pristine ng-valid"&gt;
  </code></pre>
  
  <p>So it would appear that I must use <code>required</code> and not <code>required="true"</code>, but how can I add that attribute in dynamically?</p>
  
  <p>What also doesn't work:</p>
  
  <pre><code>&lt;input type="text" {{ getRequiredAttr(field) }} /&gt;
  </code></pre>
  
  <p>Thought I might be able to have a function that returns my string "required" based on the field, that just gives templating errors.</p>
  
  <p>Is there a way to accomplish this and render only <code>required</code> for my attribute? Or a way to make Angular recognize this attribute when it has a value of true/false?</p>
  
  <p>FWIW - I've verified that I can use <code>*ngIf</code> to write two near-identical <code>&lt;input type='text' /&gt;</code> controls based on my <code>IsRequired</code> property and hardcode one with the <code>required</code> attribute but that seems pretty hacky. Hoping there's a better way!</p>