如何在Angular2 Typescript中更改HTML元素的readonly和required属性？

对于我的某些组件，我想来回更改输入字段只读和必需的属性。

我已经设法获得了一个正在运行的代码，可以按需更改它们，但是问题是它只能以只读方式工作，但似乎不能满足要求：尽管元素属性更改为必需，但Angular2仍然认为fieldCtrl有效。

这是我的朋克，我在其中说明了此问题：https ://plnkr.co/edit/Yq2RDzUJjLPgReIgSBAO?p=preview

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
    <form #f="ngForm">
      <button type="button" (click)="toggleReadOnly()">Change readonly!</button>
      <button type="button" (click)="toggleRequired()">Change required!</button>
      <input id="field" [(ngModel)]="field" ngControl="fieldCtrl" #fieldCtrl="ngForm"/>
      {{fieldCtrl.valid}}
    </form>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }

  toggleRequired(){
    this.isRequired = !this.isRequired;
    var fieldElement = <HTMLInputElement>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 = <HTMLInputElement>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;

}

更新：尝试了建议的方法

[required]="isRequired" [readonly]="isReadOnly"

而且它对于只读和对required = true来说都是一种魅力，但是我无法再关闭required属性-它显示空字段是无效的，尽管不再需要。

更新的插件：https ://plnkr.co/edit/6LvMqFzXHaLlV8fHbdOE

UPDATE2：尝试了建议的方法

[required]="isRequired ? true : null"

它确实按需从元素中添加/删除了必需的属性，但是对于不需要的空字段，字段控制器的有效属性显示为false。

在Angular2 Typescript中更改必需属性的正确方法是什么？