OnChange-Typoskript-Eingang

Will ich auch können auslösen auf änderung, wenn eine Datei ausgewählt ist aus einer Eingabe (- Datei). Ich will das ausgelöste Ereignis, um ein Textfeld werden der name der Datei.

Bin ich mit HTML5, Typoskript und Angular2. Ich kann nicht herausfinden, oder finden Sie ein Beispiel, genau, wie produzieren das Verhalten, das ich bin, nach.

siehe meinen code unten:

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

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

InformationsquelleAutor Toby Jackson | 2017-03-14