Fixing Transaction issue in Angular for Hyperledger fabric blockchain application
This article guides you on how to fix the Invoke Transaction button in the angular frontend.
After running Yeoman, it generates the angular app for our Business network, we can see that the we can create, edit and delete assets and participants, but the Invoke Transaction button is not functional.
This happens because the invoke button is not mapped properly to the addTransactionModal.
Follow the below steps to fix the issue.
Step1: Fix the invoke button
Go to the last lines of the code.
We can see that the Invoke button is not functional because Click function is not described and data-target is missing. So replace that line with the below line.
<button (click)="resetForm();" type="button" class="btn btn-primary" data-toggle="modal" data-target="#addTransactionModal">Invoke</button>
When the Invoke button is clicked, it calls addTransactionModal which is defined at the starting of the transaction.component.html file.
It also calls resetForm() which is described in the transaction.component.ts. This nulls out the input forms whenever we click on Invoke button.
Step-2: Fixing the extra inputs
After saving the code file and when you run it, it works. But the timestamp and transactionId are also displayed in the form.
To fix this we should navigate to this form code in the transaction.component.html file.
We can see that input boxes are also defined for this transactionId and timestamp. These should be produced by the hyperledger fabric and users should not input these. So fix this issue by commenting out the above lines.
I use visual studio as my main code editor. Select all the lines and click Ctrl+/ to comment all the selected lines at once. Save the file and run the app.
AND VOILA!!!
The Invoke transaction button now works fine. This took me almost days to find out why the button was not working when its clicked.
Now you have a fully functional angular app for your hyperledger model.
