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); } }
Bueno, opte por usar Angular (métodos en los componentes) no un archivo Javascript separado (ya que habría problemas para buscar elementos en dom (debido a la encapsulación de vistas y demás -> es decir, `querySelector('.className') - no encontrar elementos) y así sucesivamente), por lo tanto, use los eventos de Angular (no los eventos nativos de html = onchange => (cambio)):
https://stackblitz.com/edit/angular-ivy-hkxojg?file=src%2Fapp%2Fapp.component.ts