<div class="FlugEdit">

    <h2>Flug #{{flug.FlugNr}} bearbeiten</h2>
    <b>{{status}}</b>: {{getJson}}
    <hr>
    <!--{{spy.className}}-->
    <div class="container">
        <form (ngSubmit)="onSubmit(theForm)" #flugForm="ngForm">

            <!--Auswahlfeld für Abflugort-->
            <div class="form-group">
                <label for="Abflugort">Abflugort</label>
                <select class="form-control" id="power" required [(ngModel)]="flug.Abflugort" name="Abflugort">
                <option *ngFor="let p of orte" [value]="p"  >{{p}}</option>
    </select>
            </div>

            <div class="form-group">
                <label for="Zielort">Zielort</label>
                <select class="form-control" id="ZielortSelect" required [(ngModel)]="flug.Zielort" name="ZielortSelect">
    <option *ngFor="let p of orte" [value]="p"  >{{p}}</option>
    </select>
            </div>

            <!--Eingabefeld für Zielort-->
            <div class="form-group">
                <label for="Zielort">Zielort</label>
                <input type="text" id="Zielort" name="Zielort" #Zielort="ngModel" [(ngModel)]="flug.Zielort" (keypress)="tasteGedrueckt($event)" required minlength="3" maxlength="20" pattern="[a-zA-Z- ]*" class="form-control"> </div>

            <!--Validatorausgabe für Zielort-->
            <div [hidden]="Zielort.valid || Zielort.pristine" class="alert alert-danger">
                Zielort muss Text sein, 3 bis 20 Zeichen!
            </div>

            <div class="form-group">
                <label for="Datum">Datum</label>
                <input type="text" #spy class="form-control" id="datum" required [(ngModel)]="flug.Datum" name="Datum">
            </div>

            <div class="form-group">
                <label for="FreiePlaetze">Freie Plätze</label>
                <input type="text" min="0" max="300" minlength="2" maxlength="3" pattern="[a-z0-9]*" #freiePlaetze="ngModel" class="form-control" id="freiePlaetze" (keypress)="tasteGedrueckt($event)" required [(ngModel)]="flug.FreiePlaetze" name="freiePlaetze">
            </div> {{i}}

            <!--Validatorausgabe für Freie Plätze-->
            <div [hidden]="freiePlaetze.valid || freiePlaetze.pristine" class="alert alert-danger">
                FreiePlaetze muss ein Wert zwischen 0 und 300 sein!
            </div>

            <button type="button" class="btn btn-default" (click)="reset()">Reset</button>
            <button type="button" class="btn btn-default" (click)="save()" [disabled]="!flugForm.form.valid">Speichern</button>

        </form>
    </div>

</div>