angular2修改html,如何在Angular2 Typescript中更改HTML元素只读和必需属性？

对于我的一些组件，我想改变输入字段readonly和所需的属性来回。

我设法获得一个正在运行的代码，它们根据需要更改它们，但是问题是它可以只读，但似乎没有工作在必需：虽然元素属性更改为所需的Angular2仍然认为fieldCtrl是有效的。

//our root app component

import {Component} from 'angular2/core'

@Component({

selector: 'my-app',

providers: [],

template: `

Change readonly!

Change required!

{{fieldCtrl.valid}}

`,

directives: []

})

export class App {

constructor() {

this.name = 'Angular2'

}

toggleRequired(){

this.isRequired = !this.isRequired;

var fieldElement = 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 = 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，但是我不能再关闭所需的属性 – 它显示空字段是无效的，而不再需要了。

UPDATE2：

尝试建议的方法

[required]="isRequired ? true : null"

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

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