2017-02-27 7 views
1

구성 요소 등록 정보에서 템플릿에있는 단추를 비활성화하려면 어떻게합니까? 내가이angular2의 구성 요소에서 버튼을 비활성화하는 방법은 무엇입니까?

export class PolicyAddComponent { 
     ToggleButton: boolean = true; 

     SubmitPolicy(value: any) { 
     ToggleButton = false; 
     } 
    } 

같은 구성 요소를 가지고 난 제출 버튼이되면 내가 제출 버튼을 비활성화하려면이

<form role="form" [formGroup]="PolicyForm" (ngSubmit)="SubmitPolicy(PolicyForm.value)"> 
    <input type="date" class="form-control" formControlName="RateDate" placeholder="Rate Date"> 
    <button type="submit" class="btn btn-primary">Submit</button> 
    <button type="submit" class="btn btn-primary" (click)="ShowIssuedPolicy()">Show Issue policy</button> 
</form> 

같은 템플릿 및 표시 문제 정책 버튼이 활성화 될 수 있다고 가정 클릭 함. 내가 어떻게 할 수 있니? 달성하는 방법을 방법

답변

2

당신이 할 수있는 다음과 같은 사용 :

구성 요소
export class PolicyAddComponent{ 
    ToggleButton: boolean = true; 
    SubmitPolicy(value: any) { 
     ToggleButton=false; 
    } 
} 
템플릿
<form role="form" [formGroup]="PolicyForm" (ngSubmit)="SubmitPolicy(PolicyForm.value)"> 
    <input type="date" class="form-control" formControlName="RateDate" placeholder="Rate Date"> 
    <button type="submit" class="btn btn-primary" (click)="SubmitPolicy()">Submit</button> 
    <button type="submit" class="btn btn-primary" (click)="ShowIssuedPolicy()" [disabled]="ToggleButton">Show Issue policy</button> 
</form> 
2

하나는 사용자가 클릭과 Issue policy를 본 때까지 true을 보유 할 boolean 변수를 구현하는 것입니다. 그런 다음 변수가 false으로 설정되고 제출 단추가 사용됩니다.

<button type="submit" class="btn btn-primary" [disabled]='checkPolicy'>Submit</button> 
<button type="button" class="btn btn-primary" (click)="ShowIssuedPolicy()">Show Issue policy</button> 


checkPolicy: boolean = true; 

ShowIssuedPolicy(){ 
    this.checkPolicy = false; 
} 

Plunker link

관련 문제