Estoy tratando de cargar un archivo para calcular su hash y ponerlo en un cuadro de entrada. Si lo hago correctamente, debería mostrar el valor en el formulario, pero si estoy enviando el formulario, el valor no se envía. Solo si hago clic en el campo de entrada y agrego un espacio en blanco, por ejemplo:

archivo javascript

 function calculateHash(file, callback) { let reader = new FileReader(); reader.onload = function(event) { let file_sha256 = sha256(reader.result); callback(file_sha256); }; reader.readAsArrayBuffer(file); } function calc(){ let file = document.getElementById("fileInput").files[0]; if (file) { calculateHash(file, function(file_sha256) { document.getElementById("hash").value = file_sha256; }); } }

Componente.html

 <form #verifyForm="ngForm" (ngSubmit) = "onClickSubmit(verifyForm.value)"> <br> <br> <div class = "form-group"> <div class="col-sm-9"> <input class="form-control-file" name="fileInput" id="fileInput" type="file" onchange="calc()"> </div> <br> <label for = "hash"> Hashwert (sha256)</label><br> <input type = "text" id = "hash" name = "hash" class= "form-control" > <br> <label for = "txid"> Transaktions-ID</label><br> <input type = "text" id = "txid" name = "txid" class= "form-control" > <br> </div> <button class = "btn btn-primary">Verifizieren</button> </form>

componente.ts

 import { Component} from '@angular/core'; @Component({ selector: 'app-verify', templateUrl: './verify.component.html', styleUrls: ['./verify.component.css'] }) export class VerifyComponent{ constructor() {} onClickSubmit(data: { txid: string; hash: string; }){ alert("Entered txid : " + data.txid); alert("Entered hash : " + data.hash); } }