Angular2 템플릿에서 속성을 선택

Question

RC6에 업데이트 한 후이 같은 변수에 따라 사용할 수 없습니다 그 선택에 문제가/입력을 해제 컨트롤 생성시 true이지만 내 필요성에 맞지 않습니다. 동적 인 것은 아닙니다. (나는 .disable()/.enable()을 호출해야합니다)

다음은 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의 근사하지만이 질문은 나에게 명확하지 않았고 아직 논평 할 수 없다.

Answer 1

마침내 사용자 지정 지침을 작성하여 같은 동작을 얻을 : 아래의 시연과 같이 동적으로 활성화 또는 비활성화 HTML 요소 이벤트를 사용해야합니다 .

Answer 2

나는 지침으로 disabled을 사용할 수 없다고 생각한다.

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" 사용

 @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'); 
      }); 
      } 
     }