javascript - 通过 DOM 设置值不会使用 Angular 使用 ngModel 更新输入值

Question

我尝试上传一个文件来计算它的哈希值并将其放入输入框中。如果我这样做正确，它应该在表单中显示值，但如果我提交表单，则该值不会发送。仅当我单击输入字段并添加一个空格时，例如:

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;
    });
  }   
}

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

Component.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);
  }

}

Answer 1

好吧，选择使用 Angular(组件上的方法)而不是单独的 Javascript 文件(因为在 dom 上搜索元素会出现问题(由于 View 封装等 -> 即。`querySelector('.className') -不会找到元素)等等)，因此使用 Angular 的事件(不是 html 原生事件 = onchange => (change) ):
https://stackblitz.com/edit/angular-ivy-hkxojg?file=src%2Fapp%2Fapp.component.ts