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

Question

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

我已经设法获得了一个运行代码，它可以根据需要更改它们，但问题是它只适用于只读，但似乎不适用于必需的:尽管元素属性更改为必需的 Angular2 仍然认为 fieldCtrl 是有效。

这是我的 plunker，我在其中说明了这个问题: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

更新 2: 尝试了建议的方法

[required]="isRequired ? true : null"

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

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

Answer 1

要删除绑定(bind)属性，需要将它们设置为空。曾讨论过将其更改为在 false 时删除，但被拒绝了，至少目前是这样。

 [required]="isRequired ? '' : null"

或

 [required]="isRequired ? 'required' : null"

由于缺少 ngControl 周围的 []，您的 Plunker 会产生错误。

另见 Plunker一个工作示例

另请参阅下面 Deilan 的评论。