OnChange Typescript入力

Question

入力（ファイル）からファイルを選択したときに、オンの変更をトリガーできるようにします。私は、トリガーイベントがテキストボックスをファイルの名前に設定するようにします。

私はHTML5、Typescript、Angular2を使用しています。私は、後の行動を作り出す方法の正確な例を見つけたり見つけたりすることはできません。

以下の私のコードを参照してください。

<h2>Test Site Connection</h2> 

<p>This will allow you to check the connectivity of a set of sites by either individually or uploading a CSV file of Site IDs.</p> 
<br /> 
<div class="panel panel-primary"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Manual Test</h3> 
    </div> 
    <div class="panel-body"> 
     <p> 
      Select the country and the sites you want to test. 
     </p> 
     <ul> 
      <li>Multiple sites can be selected using commas (,).</li> 
      <li>you can see results in the Site Connection Results tab</li> 
     </ul> 
     <br /> 
     <!--Replace with lookup to enabled countries--> 
     <div class="form-group col-lg-4"> 
      <div class="col-lg-6"> 
       <select class="form-control" id="countryDropdown"> 
        <option>Select Country</option> 
        <option>US</option> 
        <option>SG</option> 
        <option>NL</option> 
       </select> 
      </div> 
     </div> 
     <div> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" placeholder="SiteID(s)" id="siteIDInput" /> 
      </div> 
      <button class="btn btn-primary" (click)="testButtonClick()">Test</button> 
     </div> 
    </div> 
</div> 

<div class="panel panel-success"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Upload file</h3> 
    </div> 
    <div class="panel-body"> 
     <div> 
      <p>Upload a CSV file of sites to test all at once.</p> 
      <br /> 
      <div class="col-lg-4"> 
       <input type="text" class="col-lg-4 form-control" id="fileTextbox" disabled/> 
      </div> 
      <label class="btn btn-primary"> 
       Browse <input type="file" id="fileInput" style="display:none;" onchange="{ setFileName() }"/> 
      </label> 
      <button class="btn btn-primary" (click)="searchButtonClick()">Test</button> 
     </div> 
    </div> 
</div> 

<div class="modal"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       <p>One fine body…</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div> 

component.ts

import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Headers, RequestOptions } from '@angular/http'; 

@Component({ 
    selector: 'testConnection', 
    // ignore error on require 
    template: require('./testConnection.component.html') 
}) 
export class TestConnectionComponent { 
    public http: Http; 
    public requestData: RequestData; 


    public constructor(http: Http) { 
     this.http = http; 

     (<HTMLInputElement>document.getElementById('fileInput')).onchange = (ev: Event) => { 
      var fileInput = (<HTMLInputElement>ev.srcElement).files[0]; 

      var fileTextbox = (<HTMLInputElement>document.getElementById('fileTextbox')); 
      fileTextbox.value = fileInput.name; 
     } 
    } 


    public testButtonClick() { 

     // Iniatialise Request object 
     let request: RequestData; 
     request = { "CountryCode": "", "SiteIDList": "" }; 

     // Get site(s) 
     var siteIdList = (<HTMLInputElement>document.getElementById('siteIDInput')).value; 

     // Get selected country 
     var countryCode = (<HTMLInputElement>document.getElementById('countryDropdown')).value; 

     // Veryify contents is just site ids. 
     // TODO 
     request.CountryCode = countryCode; 
     request.SiteIDList = siteIdList; 


     // Set Http POST options 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 

     // Call Api with test connection data 
     this.http 
      .post('/api/TestConnection/TestConnection', JSON.stringify(request), options) 
      .subscribe(data => { 
       // alert request ok 
       alert('ok'); 
      }, error => { 
       // Log error 
       console.log(error.json()); 
      }); 
    } 
} 

interface RequestData { 
    SiteIDList: string; 
    CountryCode: string; 
} 

component.htmlは、あなたがより多くの情報が必要な場合は私が知っている事前に感謝をしてみましょう。