application.form.main.html

<div class="row">
    <breadcrumbs></breadcrumbs>
</div>
<div class="loading" *ngIf="(loginInfo$ | async).size === 0"></div>

<div id="applicationFormNotice" (onHidden)="onHidden()" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header {{modalHeader | async}}">
                <h3 class="modal-title pull-left"><i class="fa fa-check-square-o"></i>&nbsp;&nbsp;{{ modalTitle | async }}</h3>
                <button type="button" class="close pull-right" aria-label="Close" (click)="hideModal()">
          <span aria-hidden="true"><i class="fa fa-times"></i></span>
        </button>
            </div>
            <div class="modal-body">
                <p>{{ modalText | async }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Κλείσιμο</button>
            </div>
        </div>
    </div>
</div>


<form novalidate [formGroup]="studentDataGroup" #form>
    <p style="margin-top: 20px; line-height: 2em;">Συμπληρώστε με κεφαλαία γράμματα τα στοιχεία του μαθητή και στη συνέχεια επιλέξτε <i>Συνέχεια</i>. <strong>Προσοχη!</strong> Συμπληρώσετε τα στοιχεία ακριβώς όπως είναι στον τελευταίο τίτλο κτήσης απολυτηρίου/ πτυχίου του μαθητή.</p>
    <p style="margin-top: 20px; line-height: 2em;"><strong>Η ακρίβεια των στοιχείων που υποβάλλονται με αυτή τη δήλωση μπορεί να ελεγχθεί με βάση το αρχείο άλλων υπηρεσιών (άρθρο 8 παρ. 4 Ν. 1599/1986).</strong></p>
    <p style="margin-top: 20px; line-height: 2em;"><strong>Όλα τα πεδία που συνοδεύονται από (*) είναι απαραίτητο να συμπληρωθούν.<br/>Παρακαλούμε συμπληρώνετε τα στοιχεία με κεφαλαίους χαρακτήρες.</strong></p>

    <div *ngFor="let loginInfoRow$ of loginInfo$ | async; let i=index;" style="margin-bottom: 20px;">
        <div class="row evenin" style="margin: 0px 2px 0px 2px; line-height: 2em;">
            <div class="col-md-12" style="font-size: 1em; font-weight: bold; text-align: center;">Στοιχεία αιτούμενου κηδεμόνα</div>
        </div>
        <div class="row oddin" style="margin: 0px 2px 0px 2px; line-height: 2em;">
            <div class="col-md-3" style="font-size: 0.8em;">Όνομα</div>
            <div class="col-md-3" style="font-size: 0.8em; font-weight: bold">{{ loginInfoRow$.cu_name }}</div>
            <div class="col-md-3" style="font-size: 0.8em;">Επώνυμο</div>
            <div class="col-md-3" style="font-size: 0.8em; font-weight: bold">{{ loginInfoRow$.cu_surname }}</div>
        </div>
        <div class="row oddin" style="margin: 0px 2px 0px 2px; line-height: 2em;">
            <div class="col-md-3" style="font-size: 0.8em;">Όνομα πατέρα</div>
            <div class="col-md-3" style="font-size: 0.8em; font-weight: bold">{{ loginInfoRow$.cu_fathername }}</div>
            <div class="col-md-3" style="font-size: 0.8em;">Όνομα μητέρας</div>
            <div class="col-md-3" style="font-size: 0.8em; font-weight: bold">{{ loginInfoRow$.cu_mothername }}</div>
        </div>
    </div>

    <table>
        <tr>
            <td>
                <div class="form-group">
                    <label for="regionaddress">Διεύθυνση κατοικίας αιτούμενου κηδεμόνα(<span style="color: #ff0000;">*</span>)</label><input class="form-control" type="text" formControlName="regionaddress">
                </div>
                <div class="alert alert-danger" *ngIf="studentDataGroup.get('regionaddress').touched && studentDataGroup.get('regionaddress').hasError('required')">
                    Το πεδίο δεν μπορεί να αφεθεί κενό!
                </div>
                <div class="alert alert-danger" *ngIf="studentDataGroup.get('regionaddress').dirty && studentDataGroup.get('regionaddress').hasError('pattern')">
                    Δεν επιτρέπονται μη έγκυροι χαρακτήρες σε αυτό το πεδίο!
                </div>
            </td>
            <td>
                <div class="form-group">
                    <label for="regiontk">TK(<span style="color: #ff0000;">*</span>)</label><input class="form-control" type="text" formControlName="regiontk">
                </div>
                <div class="alert alert-danger" *ngIf="studentDataGroup.get('regiontk').touched && studentDataGroup.get('regiontk').hasError('required')">
                    Το πεδίο δεν μπορεί να αφεθεί κενό!
                </div>
                <div class="alert alert-danger" *ngIf="studentDataGroup.get('regiontk').dirty && studentDataGroup.get('regiontk').hasError('pattern')">
                    Ο ταχυδρομικός κώδικας αποτελείται από πέντε (5) αριθμητικά ψηφία!
                </div>
            </td>
            <td>
                <div class="form-group">
                    <label for="regionarea">Πόλη/Περιοχή(<span style="color: #ff0000;">*</span>)</label><input class="form-control" type="text" formControlName="regionarea">
                </div>
                <div class="alert alert-danger" *ngIf="studentDataGroup.get('regionarea').touched && studentDataGroup.get('regionarea').hasError('required')">
                    Το πεδίο δεν μπορεί να αφεθεί κενό!
                </div>
                <div class="alert alert-danger" *ngIf="studentDataGroup.get('regionarea').dirty && studentDataGroup.get('regionarea').hasError('pattern')">
                    Δεν επιτρέπονται μη έγκυροι χαρακτήρες σε αυτό το πεδίο!
                </div>
            </td>
        </tr>
    </table>


    <div class="row evenin" style="margin: 20px 2px 10px 2px; line-height: 2em;">
        <div class="col-md-12" style="font-size: 1.5em; font-weight: bold; text-align: center;">Στοιχεία μαθητή</div>
    </div>
    <div class="form-group">
        <label for="name">Όνομα μαθητή(<span style="color: #ff0000;">*</span>)</label><input class="form-control" type="text" formControlName="name">
    </div>
    <div class="alert alert-danger" *ngIf="studentDataGroup.get('name').touched && studentDataGroup.get('name').hasError('required')">
        Το πεδίο δεν μπορεί να αφεθεί κενό!
    </div>
    <div class="alert alert-danger" *ngIf="studentDataGroup.get('name').dirty && studentDataGroup.get('name').hasError('pattern')">
        Δεν επιτρέπονται ψηφία ή άλλοι μη έγκυροι χαρακτήρες σε αυτό το πεδίο!
    </div>

    <div class="form-group">
        <label for="studentsurname">Επώνυμο μαθητή(<span style="color: #ff0000;">*</span>)</label><input class="form-control" type="text" formControlName="studentsurname">
    </div>
    <div class="alert alert-danger" *ngIf="studentDataGroup.get('studentsurname').touched && studentDataGroup.get('studentsurname').hasError('required')">
        Το πεδίο δεν μπορεί να αφεθεί κενό!
    </div>
    <div class="alert alert-danger" *ngIf="studentDataGroup.get('studentsurname').dirty && studentDataGroup.get('studentsurname').hasError('pattern')">
        Δεν επιτρέπονται ψηφία ή άλλοι μη έγκυροι χαρακτήρες σε αυτό το πεδίο!
    </div>

    <div class="form-group">
        <label for="fatherfirstname">Όνομα πατέρα(<span style="color: #ff0000;">*</span>)</label><input class="form-control" type="text" formControlName="fatherfirstname">
    </div>
    <div class="alert alert-danger" *ngIf="studentDataGroup.get('fatherfirstname').touched && studentDataGroup.get('fatherfirstname').hasError('required')">
        Το πεδίο δεν μπορεί να αφεθεί κενό!
    </div>
    <div class="alert alert-danger" *ngIf="studentDataGroup.get('fatherfirstname').dirty && studentDataGroup.get('fatherfirstname').hasError('pattern')">
        Δεν επιτρέπονται ψηφία ή άλλοι μη έγκυροι χαρακτήρες σε αυτό το πεδίο!
    </div>

    <div class="form-group">
        <label for="motherfirstname">Όνομα μητέρας(<span style="color: #ff0000;">*</span>)</label><input class="form-control" type="text" formControlName="motherfirstname">
    </div>
    <div class="alert alert-danger" *ngIf="studentDataGroup.get('motherfirstname').touched && studentDataGroup.get('motherfirstname').hasError('required')">
        Το πεδίο δεν μπορεί να αφεθεί κενό!
    </div>
    <div class="alert alert-danger" *ngIf="studentDataGroup.get('motherfirstname').dirty && studentDataGroup.get('motherfirstname').hasError('pattern')">
        Δεν επιτρέπονται ψηφία ή άλλοι μη έγκυροι χαρακτήρες σε αυτό το πεδίο!
    </div>

    <div class="form-group">
        <label for="studentbirthdate">Ημερομηνία γέννησης μαθητή- Δεν πληκτρολογείτε. Επιλέξτε το εικονίδιο δεξιά!(<span style="color: #ff0000;">*</span>)</label>
        <my-date-picker name="studentbirthdate" [options]="myDatePickerOptions" formControlName="studentbirthdate" locale="el"></my-date-picker>
    </div>
    <div class="alert alert-danger" *ngIf="studentDataGroup.get('studentbirthdate').touched && studentDataGroup.get('studentbirthdate').hasError('required')">
        Συμπληρώστε την ημερομηνία γέννησης του μαθητή!
    </div>

    <div class="form-group">
        <label for="lastschool_schoolname">Σχολείο τελευταίας φοίτησης(<span style="color: #ff0000;">*</span>)</label><br/>
        <input ngui-auto-complete formControlName="lastschool_schoolname"
        [source]="observableSource.bind(this)"
        [list-formatter]="lastSchoolListFormatter"
        [value-formatter]="lastSchoolValueFormatter"
        [min-chars]="5"
        no-match-found-text="Δεν βρέθηκαν σχολεία"
            (valueChanged)="lastSchoolValueChanged($event)"
            placeholder="Πληκτρολογήστε τουλάχιστο 5 χαρακτήρες" class="form-control">
    </div>
    <div class="alert alert-danger" *ngIf="studentDataGroup.get('lastschool_schoolname').dirty && studentDataGroup.get('lastschool_schoolname').hasError('status')">
        Η επιλογή από αυτή τη λίστα είναι απαραίτητη!
    </div>

    <div class="form-group">
        <label for="lastschool_class">Τάξη τελευταίας φοίτησης(<span style="color: #ff0000;">*</span>)</label><br/>
        <select class="form-control" formControlName="lastschool_class">
        <option value="">Παρακαλώ επιλέξτε...</option>
        <option value=1>Α’</option>
        <option value=2>Β’</option>
        <option value=3>Γ'</option>
        <option value=4>Δ'</option>
    </select>
    </div>
    <div class="alert alert-danger" *ngIf="studentDataGroup.get('lastschool_class').dirty && studentDataGroup.get('lastschool_class').hasError('status')">
        Η επιλογή από αυτή τη λίστα είναι απαραίτητη!
    </div>

    <div class="form-group">
        <label for="lastschool_schoolyear">Σχολικό έτος τελευταίας φοίτησης(<span style="color: #ff0000;">*</span>)</label>
        <br/>
        <select class="form-control" formControlName="lastschool_schoolyear">
        <option value="">Παρακαλώ επιλέξτε...</option>
        <option *ngFor="let schoolyear of schoolyears" value="{{schoolyear}}">
          {{ schoolyear }}
        </option>
    </select>
    </div>
    <div class="alert alert-danger" *ngIf="studentDataGroup.get('lastschool_schoolyear').dirty && studentDataGroup.get('lastschool_schoolyear').hasError('status')">
        Η επιλογή από αυτή τη λίστα είναι απαραίτητη!
    </div>


    <div class="form-group">
        <label for="relationtostudent">Η δήλωση προτίμησης γίνεται από:(<span style="color: #ff0000;">*</span>)</label><br/>
        <select class="form-control" formControlName="relationtostudent">
        <option value="">Παρακαλώ επιλέξτε...</option>
        <option value="Γονέας/Κηδεμόνας">Γονέας/Κηδεμόνας</option>
        <option value="Μαθητής">Μαθητής</option>
    </select>
        <div class="alert alert-danger" *ngIf="studentDataGroup.get('relationtostudent').dirty && studentDataGroup.get('relationtostudent').hasError('status')">
            Η επιλογή από αυτή τη λίστα είναι απαραίτητη!
        </div>
    </div>

    <div class="form-group">
        <label for="telnum">Σταθερό Τηλέφωνο Επικοινωνίας(<span style="color: #ff0000;">*</span>)</label><input class="form-control" type="text" formControlName="telnum">
    </div>
    <div class="alert alert-danger" *ngIf="studentDataGroup.get('telnum').touched && studentDataGroup.get('telnum').hasError('required')">
        Το πεδίο δεν μπορεί να αφεθεί κενό!
    </div>
    <div class="alert alert-danger" *ngIf="studentDataGroup.get('telnum').dirty && studentDataGroup.get('telnum').hasError('pattern')">
        Επιτρέπονται μόνο ψηφία σε αυτό το πεδίο και πρέπει να αντιστοιχούν σε σταθερό τηλέφωνο!
    </div>

    <div class="row" style="margin-top: 20px; margin-bottom: 20px;">
        <div class="col-md-6">
            <button type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack()">
                <i class="fa fa-backward"></i>
            </button>
        </div>
        <div class="col-md-6">
            <button type="button" class="btn-primary btn-lg pull-right isclickable" style="width: 9em;" (click)="submitSelected()">
                <span style="font-size: 0.9em; font-weight: bold;">Συνέχεια&nbsp;&nbsp;&nbsp;</span><i class="fa fa-forward"></i>
            </button>
        </div>

    </div>

</form>

  <!-- <pre>{{studentDataGroup.value | json}}</pre> -->