如何禁用angular2中组件的按钮？

Question

如何从组件属性中禁用模板中存在的按钮？ 假设我有一个这样的组件

    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>

我希望单击提交按钮后，禁用提交按钮，并启用“显示问题”策略按钮。 我怎样才能做到这一点？

Answer 1

实现该目标的方法之一是实现一个boolean变量，该变量将保持一个true值， 直到用户单击并查看“ Issue policy 为止 。 然后，变量设置为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;
}

柱塞链接

Answer 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>