如何更改Angular2 Typescript中的HTML元素只读和必需属性？

对于我的一些组件，我想前后更改输入字段readonly和required属性

我已经设法得到了一个运行的代码，可以根据需要更改这两个代码，但问题是它只适用于readonly，而不适用于required：尽管元素属性更改为required Angular2，但它仍然认为fieldCtrl是有效的

这是我的plunker，我在这里说明了这个问题：https://plnkr.co/edit/Yq2RDzUJjLPgReIgSBAO?p=preview

//我们的根应用程序组件
从'angular2/core'导入{Component}
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`
&lt；div&gt；
&lt；form#f=“ngForm”&gt；
&lt；button type=“button”（单击）=“toggleReadOnly（）”&gt；更改只读！&lt；/button&gt；
&lt；button type=“button”（单击）=“toggleRequired（）”&gt；需要更改！&lt；/button&gt；
&lt；input id=“field”[（ngModel）]=“field”ngControl=“fieldCtrl”#fieldCtrl=“ngForm”/gt；
{{fieldCtrl.valid}
&lt；/form&gt；
&lt；/div&gt；
`,
指令：[]
})
导出类应用程序{
构造函数（）{
this.name='Angular2'
}
toggleRequired（）{
this.isRequired=！this.isRequired；
var fieldElement=&lt；HTMLInputElement&gt；document.getElementById（'field'）；
如果（需要本文件）{
fieldElement.required=true；
this.field=“现在需要”；
}
否则{
fieldElement.required=false；
this.field=“可以留空”；
}
}
toggleReadOnly（）{
this.isReadOnly=！this.isReadOnly；
var fieldElement=&lt；HTMLInputElement&gt；document.getElementById（'field'）；
如果（仅此.isReadOnly）{
fieldElement.readOnly=true；
this.field=“它现在是只读的”；
}
否则{
fieldElement.readOnly=false；
this.field=“可以自由编辑”；
}
}
private isReadOnly:boolean=false；
私有字段：string=“可以自由编辑”；
private isRequired:boolean=false；
}

更新：
尝试建议的方法

[required]=“isRequired”[readonly]=“isReadOnly”

对于readonly和required=true，它就像一个符咒，但是我不能再关闭required属性了——它显示空字段是无效的，尽管不再是必需的

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

更新2：
尝试建议的方法

[required]=“isRequired？true:null”

它确实按需从元素中添加/删除必需属性，但对于不需要的空字段，field controller的valid属性显示为false

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