Angular2使用模板中的属性禁用输入/选择答案

【问题标题】：Angular2 disable input/select with attribute in templateAngular2使用模板中的属性禁用输入/选择
【发布时间】：2017-01-14 23:31:09
【问题描述】：

更新到 RC6 后，我遇到了根据如下变量禁用的选择问题：https://plnkr.co/edit/h1KktXxEfhypHEgefDWQ?p=preview

我已经查看了此警告消息，在创建控件时将 disabled 选项设置为 true，但它不符合我的需要，因为这不能是动态的（我必须调用 .disable() / 。启用（））

这是一些代码，以防 plnkr 不起作用：

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      //this select is disabled
      <select formControlName="control1" disabled>
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">four</option>
      </select>

      //This select isn't disabled after RC6 update
      <select formControlName="control2" [disabled]="true">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">four</option>
      </select>
    </form>
  `,
})
export class App {
  form:FormGroup;
  constructor() {
    this.form = new FormGroup({
      control1: new FormControl('2');
      control2: new FormControl('2');
    });
  }
}

注意：这可能与 angular2 will not disable input based on true or false condition 重复，但我不清楚这个问题，我还不能发表评论

【问题讨论】：

标签： angular

【解决方案1】：

我终于通过创建自定义指令获得了相同的行为：

import { Directive, ElementRef, Input, Renderer } from '@angular/core';

@Directive({ selector: '[customDisabled]' })
export class CustomDisabledDirective {

    @Input() customDisabled : boolean;
    constructor(private el: ElementRef, private renderer: Renderer) {}

    ngOnChanges() {
        if(this.customDisabled) {
            this.renderer.setElementAttribute(this.el.nativeElement, 'disabled', 'true');
        } else {
            this.renderer.setElementAttribute(this.el.nativeElement, 'disabled', null);
        }
    }
}

我现在使用[customDisabled]="myVar"而不是[disabled]="myVar"。

【讨论】：

【解决方案2】：

我认为你不能使用disabled 作为指令。您必须使用事件来动态启用或禁用 HTML 元素，如下所示：

     @Component({
      selector: 'my-app',
      template: `
        <form [formGroup]="form">

          ---
          ---

           //I have applied function on change event; you can use click, onload, etc
          <select id="id1" formControlName="control2" (change)="scope()">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
            <option value="4">four</option>
          </select>
        </form>
      `,
    })
    export class App {
      form:FormGroup;
     scope()
     {
        document.getElementById("id1").disabled=true;
    }
          constructor() {
            this.form = new FormGroup({
              control1: new FormControl('2');
              control2: new FormControl('2');
            });
          }
        }

【讨论】：