CODEWITHSUNDEEP
javascriptangularangular-ngmodel
user15965549
user15965549

Reputation: 31

Setting value via DOM doesnt update the value of the input with ngModel using Angular

I a trying to upload a file to calculate it's hash and put it in a inputbox. If I do so correctly it should display value in the form, but if I am submitting the form the value doesnt get send. Only if I click in the input field and add a blank space for example:

javascript file

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

}

Upvotes: 3

Views: 745

Answers (1)

Vovan_Super
Vovan_Super

Reputation: 525

Well, opt to using Angular (methods on the components) not a separate Javascript file (as there would be problems searching elements on dom (due to view encapsulation and such -> ie. `querySelector('.className') - wouldn\t find elements) and so on ) , hence use Angular's events (not html native events = onchange => (change) ):
https://stackblitz.com/edit/angular-ivy-hkxojg?file=src%2Fapp%2Fapp.component.ts

enter image description here

Upvotes: 1

Related Questions