使用xml文件中的javascript填充Ngform

问题：我试图用用户上传的xml文件填充表单。因此，我有一个模式窗口，用户在其中插入文件，然后返回表单组件。在表单组件中，它将文件发送到javascript文件，后者将解析该文件。之后，我映射了xml文件，从文件中获取所有值，并将它们分配给表单对象的对应键。现在我不知道如何用这个对象填充实际的html表单，也不知道如何将它带到typescript中

角形的一部分：

<form #f="ngForm" [ngFormOptions]="{updateOn: 'blur'}" class="form-group">
    <div class="row">
        <div class="col">
    <!----------------- LOCAL ------------------->
    <div class="row">
        <div class="col-sm mb-2">
            <h4>Local</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-sm">
            <div class="form-group">
                <label for="data">Data</label>
                <input type="date" class="form-control form-control-sm" name="data" placeholder="Data" ngModel #date="ngModel">
            </div>
        </div>
        <div class="col-sm">
            <div class="form-group">
                <label for="time">Hora</label>
                <input type="time" class="form-control form-control-sm" name="time" placeholder="time" ngModel #time="ngModel">
            </div>
        </div>
        <div class="col-sm">
            <div class="form-group">
                <label for="sala">Sala</label>
                <select id="sala" name="sala" class="form-control form-control-sm" ngModel #sala="ngModel">
                    <option disabled>Escolher Sala</option>
                    <option value="1">Sala Suggia</option>
                    <option value="2">Sala 2</option> 
                    <option value="3">Sala de Ensaio 1</option> 
                    <option value="4">Sala de Ensaio 2</option> 
                    <option value="5">Cibermúsica</option> 
                    <option value="6">Restaurante</option> 
                    <option value="7">Sala VIP</option> 
                    <option value="8">Terraço VIP</option> 
                    <option value="9">Sala Renascença</option> 
                    <option value="10">Foyer Nascente</option>
                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm">
            <div class="form-group">
                <label for="edificio">Edíficio</label>
                <input type="text" class="form-control form-control-sm" name="edificio" placeholder="Edíficio" ngModel #building="ngModel">
            </div>
        </div>
        <div class="col-sm">
            <div class="form-group">
                <label for="cidade">Cidade</label>
                <input type="text" class="form-control form-control-sm" name="cidade" placeholder="Cidade" ngModel #city="ngModel">
            </div>
        </div>
        <div class="col-sm">
            <div class="form-group">
                    <label for="pais">País</label>
                    <input type="text" class="form-control form-control-sm" name="pais" placeholder="País" ngModel #country="ngModel">
            </div>
        </div>
    </div>
</div>
</form>

Javascript:在这个文件中，我读取xml文件，解析它，然后从文件中获取值。 之后，我尝试用相应的值填充表单对象

var form;

function readFile(event) {
  "use strict"; 
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(event.target.result, 'text/xml');
  populateData(form, xmlDoc);
}

function changeFile(file, form1) {
  "use strict";
  form = form1;
  var reader = new FileReader();
  reader.addEventListener('load', readFile);
  reader.readAsText(file);
}

function populateData(form, xmlDom){ 
  "use strict";
  var root = xmlDom.documentElement;
  var metadataNodes = root.querySelectorAll('entry');
  var map = {};
  metadataNodes.forEach(function(metadata) {
    var key = metadata.querySelector('key').textContent;
    var value = metadata.querySelector('value').textContent;
    map[key] = value;
  });
  //populate form here
  Object.keys(form).forEach(e => console.log(`key=${e}  value=${map[e]}`));    

}

var form;

function readFile(event) {
  "use strict"; 
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(event.target.result, 'text/xml');
  populateData(form, xmlDoc);
}

function changeFile(file, form1) {
  "use strict";
  form = form1;
  var reader = new FileReader();
  reader.addEventListener('load', readFile);
  reader.readAsText(file);
}

function populateData(form, xmlDom){ 
  "use strict";
  var root = xmlDom.documentElement;
  var metadataNodes = root.querySelectorAll('entry');
  var map = {};
  metadataNodes.forEach(function(metadata) {
    var key = metadata.querySelector('key').textContent;
    var value = metadata.querySelector('value').textContent;
    map[key] = value;
  });
  //populate form here
  Object.keys(form).forEach(e => console.log(`key=${e}  value=${map[e]}`));    

}