title: How to change HTML element readonly and required attribute in Angular2 Typescript?
body: <p>For some of my components I would like to change input field readonly and required attributes back and forth. </p>
  
  <p>I've managed to get a running code, that changes both of them on demand, but problem is that it works for readonly, but seems not to be working on required: although element attribute changes to required Angular2 still thinks fieldCtrl is valid.</p>
  
  <p>Here is my plunker, where I illustrated this problem: <a href="https://plnkr.co/edit/Yq2RDzUJjLPgReIgSBAO?p=preview">https://plnkr.co/edit/Yq2RDzUJjLPgReIgSBAO?p=preview</a></p>
  
  <pre><code>//our root app component
  import {Component} from 'angular2/core'
  
  @Component({
    selector: 'my-app',
    providers: [],
    template: `
      &lt;div&gt;
      &lt;form #f="ngForm"&gt;
        &lt;button type="button" (click)="toggleReadOnly()"&gt;Change readonly!&lt;/button&gt;
        &lt;button type="button" (click)="toggleRequired()"&gt;Change required!&lt;/button&gt;
        &lt;input id="field" [(ngModel)]="field" ngControl="fieldCtrl" #fieldCtrl="ngForm"/&gt;
        {{fieldCtrl.valid}}
      &lt;/form&gt;
      &lt;/div&gt;
    `,
    directives: []
  })
  export class App {
    constructor() {
      this.name = 'Angular2'
    }
  
    toggleRequired(){
      this.isRequired = !this.isRequired;
      var fieldElement = &lt;HTMLInputElement&gt;document.getElementById('field');
      if (this.isRequired){
        fieldElement.required = true;
        this.field = "it's required now";
      }
      else{
        fieldElement.required = false;
        this.field = "can leave it blank";
      }
    }
  
    toggleReadOnly(){
      this.isReadOnly = !this.isReadOnly;
      var fieldElement = &lt;HTMLInputElement&gt;document.getElementById('field');
      if (this.isReadOnly){
        fieldElement.readOnly = true;
        this.field = "it's readonly now";
      }
      else{
        fieldElement.readOnly = false;
        this.field = "feel free to edit";
      }
    }
  
    private isReadOnly:boolean=false;
  
    private field:string = "feel free to edit";
  
    private isRequired:boolean=false;
  
  }
  </code></pre>
  
  <p>UPDATE:
  Tried suggested method</p>
  
  <pre><code>[required]="isRequired" [readonly]="isReadOnly"
  </code></pre>
  
  <p>And it works like a charm for readonly, and for required=true, but I can't turn the required attribute off anymore - it shows empty field is invalid allthough not required anymore.</p>
  
  <p>Updated plunker: <a href="https://plnkr.co/edit/6LvMqFzXHaLlV8fHbdOE">https://plnkr.co/edit/6LvMqFzXHaLlV8fHbdOE</a></p>
  
  <p>UPDATE2:
  Tried suggested method </p>
  
  <pre><code>[required]="isRequired ? true : null"
  </code></pre>
  
  <p>It does add/remove required attribute from element by demand, however field controller's valid property shows false for empty field that is not required.</p>
  
  <p>What would be correct way of changing required attribute in Angular2 Typescript?</p>