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

问题描述

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

For some of my components I would like to change input field readonly and required attributes back and forth.

我设法获得了一个正在运行的代码，该代码可以按需更改它们，但是问题是它适用于只读，但似乎不能满足要求:尽管元素属性更改为必需，但Angular2仍然认为fieldCtrl是有效.

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.

这是我的笨拙的人，在这里我说明了这个问题: https://plnkr.co/edit/Yq2RDzUJjLPgReIgSBAO?p=预览

Here is my plunker, where I illustrated this problem: 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;

}

更新:尝试了建议的方法

UPDATE:Tried suggested method

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

对于只读和对required = true来说，它就像一个符咒，但是我无法再关闭required属性-它显示空字段是无效的，尽管不再需要.

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.

更新的监听器: https://plnkr.co/edit/6LvMqFzXHaLlV8fHbdOE

UPDATE2:尝试了建议的方法

UPDATE2:Tried suggested method

[required]="isRequired ? true : null"

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

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.

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

What would be correct way of changing required attribute in Angular2 Typescript?

推荐答案

要删除绑定属性，需要将其设置为null.进行了讨论以将其更改为删除错误，但至少在目前为止已被拒绝.

For bound attributes to be removed they need to be set to null. There was a discussion to change it to remove on false but it was declined, at least for now.

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

或

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

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

Your Plunker produces an error because of missing [] around ngControl.

有关工作示例，另请参见柱塞

See also this Plunker for a working example

另请参阅以下Deilan的评论.

See also Deilan's comments below.

这篇关于如何在Angular2 Typescript中更改HTML元素的readonly和required属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！