115 lines
3.4 KiB
HTML
115 lines
3.4 KiB
HTML
<div class="registration-container">
|
|
<h2 class="title">🚀 Spaceflight Candidate Registration</h2>
|
|
|
|
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="form">
|
|
<!-- <div class="upload-section">
|
|
<input
|
|
type="file"
|
|
accept="image/*"
|
|
(change)="onFileSelected($event)"
|
|
/>
|
|
<mat-label>Candidate Profile Picture</mat-label>
|
|
<div class="preview">
|
|
<img [src]="previewUrl" alt="Preview" />
|
|
</div>
|
|
</div> -->
|
|
<!-- <app-image-input></app-image-input> -->
|
|
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Full Name</mat-label>
|
|
<input matInput formControlName="fullName" />
|
|
@if (form.get('fullName')?.hasError('required')) {
|
|
<mat-error>
|
|
Name is required
|
|
</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Email</mat-label>
|
|
<input matInput formControlName="email" />
|
|
@if (form.get('email')?.hasError('email')) {
|
|
<mat-error>
|
|
Invalid email
|
|
</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Phone Number</mat-label>
|
|
<input matInput formControlName="phoneNumber" placeholder="+972-XXXXXXX"/>
|
|
@if (form.get('phoneNumber')?.hasError('required')) {
|
|
<mat-error>
|
|
Phone number is required
|
|
</mat-error>
|
|
}
|
|
@if (form.get('phoneNumber')?.hasError('pattern')){
|
|
<mat-error>
|
|
Invalid phone number
|
|
</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Age</mat-label>
|
|
<input matInput type="number" formControlName="age" />
|
|
@if (form.get('age')?.hasError('min') || form.get('age')?.hasError('max')) {
|
|
<mat-error>
|
|
Only aplicants of age 18 - 70 allowed
|
|
</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>City / Region</mat-label>
|
|
<input matInput formControlName="cityOrRegion" />
|
|
@if (form.get('cityOrRegion')?.hasError('required')) {
|
|
<mat-error>
|
|
Field is required
|
|
</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Hobbies</mat-label>
|
|
<textarea matInput rows="2" formControlName="hobbies"></textarea>
|
|
@if (form.get('hobbies')?.hasError('maxLength')) {
|
|
<mat-error>
|
|
Maximum length is 300 characters
|
|
</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Why I am the perfect candidate</mat-label>
|
|
<textarea matInput rows="4" formControlName="justification"></textarea>
|
|
@if (form.get('justification')?.hasError('required')) {
|
|
<mat-error>
|
|
Field is required
|
|
</mat-error>
|
|
}
|
|
@if (form.get('justification')?.hasError('maxLength')) {
|
|
<mat-error>
|
|
Maximum length is 300 characters
|
|
</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
|
|
|
|
<button
|
|
mat-raised-button
|
|
color="accent"
|
|
class="full-width"
|
|
type="submit"
|
|
[disabled]="form.invalid"
|
|
>
|
|
Submit Application
|
|
</button>
|
|
|
|
<button
|
|
mat-raised-button
|
|
(click)="onCheckErrors()">
|
|
check
|
|
</button>
|
|
</form>
|
|
</div> |