Reputation: 3511
How can i disable the button present in the template from the components properties? suppose i have a component 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?
Upvotes: 1
Views: 10482
Reputation: 14229
You could do that using the following:
Componentexport 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>
Upvotes: 3
Reputation: 41913
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;
}
Upvotes: 4