Angular中通过DOM设置input值后ngForm提交无法获取对应值如何解决

问题原因 #

Angular的模板驱动表单（ngForm）依赖输入框的交互事件同步值到表单模型，你通过原生JS直接修改输入框的value属性，没有触发Angular的表单值更新逻辑，所以提交时拿不到哈希值，只有手动修改输入框时才会触发对应的input事件完成值同步。另外你将哈希计算逻辑写在独立JS文件中，脱离Angular组件上下文，也不符合Angular的开发规范。

解决方案（推荐：按Angular规范重构） #

第一步：修改Component.ts，整合哈希计算逻辑，定义绑定变量 #

import { Component} from '@angular/core';
// 如果你用的是crypto-js的sha256，先引入，根据你实际的sha256实现调整
import sha256 from 'crypto-js/sha256';
import encHex from 'crypto-js/enc-hex';

@Component({
  selector: 'app-verify',
  templateUrl: './verify.component.html',
  styleUrls: ['./verify.component.css']
})
export class VerifyComponent{
  // 定义和hash输入框绑定的变量
  fileHash = '';
  txid = '';

  constructor() {}

  calculateHash(file: File, callback: (hash: string) => void) {  
    const reader = new FileReader();
    reader.onload = (event) => {
      // 这里根据你实际的sha256方法调整计算逻辑
      const fileSha256 = encHex.stringify(sha256(reader.result as ArrayBuffer));
      callback(fileSha256);
    };
    reader.readAsArrayBuffer(file);
  }

  calc(event: Event) {
    const input = event.target as HTMLInputElement;
    const file = input.files?.[0];
    if (file) {
      this.calculateHash(file, (fileSha256) => {
        // 直接修改绑定的变量，Angular会自动同步到输入框和表单模型
        this.fileHash = fileSha256;
      });
    }   
  }

  onClickSubmit(data: { txid: string; hash: string; }){
    alert("Entered txid : " + data.txid);
    alert("Entered hash : " + data.hash);
  }
}

第二步：修改Component.html，调整事件和双向绑定 #

<form #verifyForm="ngForm" (ngSubmit)="onClickSubmit(verifyForm.value)">
   <br> <br> 
   <div class = "form-group">
    <div class="col-sm-9">
        <!-- 把原生onchange换成Angular的(change)事件 -->
        <input class="form-control-file" name="fileInput" id="fileInput" type="file" (change)="calc($event)">     
    </div> <br> 
    <label for = "hash"> Hashwert (sha256)</label><br>
    <!-- 增加ngModel和组件内的fileHash变量双向绑定 -->
    <input type = "text" id = "hash" name = "hash" class= "form-control" [(ngModel)]="fileHash"> <br>
    <label for = "txid"> Transaktions-ID</label><br>
    <input type = "text" id = "txid" name = "txid" class= "form-control" [(ngModel)]="txid"> <br> 
    </div>
    <button class = "btn btn-primary">Verifizieren</button>
</form>

快速修复方案（不重构原有逻辑） #

如果不想调整现有代码结构，只需要在你给hash输入框赋值后，手动触发input事件即可让ngForm同步到值，修改calc的回调逻辑：

calculateHash(file, function(file_sha256) {
    const hashInput = document.getElementById("hash");
    hashInput.value = file_sha256;
    // 手动触发input事件，通知Angular表单更新值
    hashInput.dispatchEvent(new Event('input'));
});

内容的提问来源于stack exchange，提问作者user15965549