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值，直到用户点击并看到{{1} }}。然后，变量设置为Issue policy并启用提交按钮。

false

<强> Plunker link

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>

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

2 个答案: