javascript - How to disable a button from the component in angular2? - Stack Overflow

admin管理员组

文章数量:1310498

How can i disable the button present in the template from the ponents properties? suppose i have a ponent like this

    export class PolicyAddComponent {
      ToggleButton: boolean = true;

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

and i have a template like this

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

I want the submit button to be disabled and the Show Issue policy button to be enabled once the submit button is clicked. How can i do that?

How can i disable the button present in the template from the ponents properties? suppose i have a ponent like this

    export class PolicyAddComponent {
      ToggleButton: boolean = true;

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

and i have a template like this

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

I want the submit button to be disabled and the Show Issue policy button to be enabled once the submit button is clicked. How can i do that?

• javascript
• angular

Share Improve this question Follow edited Jul 10, 2017 at 8:49 kind user 41.9k88 gold badges6868 silver badges7878 bronze badges asked Feb 27, 2017 at 13:45 Lijin DurairajLijin Durairaj 3,5111212 gold badges3434 silver badges5252 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

One of the ways how to achieve it is to implement a boolean variable, which will hold a true value until the user has clicked and seen the Issue policy. Then, the variable sets into false and the submit button is enabled.

<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

You could do that using the following:

Component

export class PolicyAddComponent{
    ToggleButton: boolean = true;
    SubmitPolicy(value: any) {
        ToggleButton=false;
    }
}

Template

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

本文标签： javascriptHow to disable a button from the component in angular2Stack Overflow