matsen-tool-fe/matsen-tool/src/app/contacts/new-contact/new-contact.component.html

<h2 *ngIf="!contact.id">{{'basic.new-contact' | translate}}</h2>
<h2 *ngIf="contact.id">{{'basic.edit-contact' | translate}}</h2>
<div class="spt-form">
    <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
        <div class="mb-3">
            <label for="firstName" class="form-label">{{'form.firstname' | translate}}:</label>
            <input type="text" class="form-control" id="firstName" formControlName="firstName" />
            <div class="form-text" *ngIf="contactForm.get('firstName')?.invalid && contactForm.get('firstName')?.touched">
                {{'form.firstname' | translate}} {{'form.mandatory' | translate}}.
            </div>
        </div>

        <div class="mb-3">
            <label for="lastName" class="form-label">{{'form.lastname' | translate}}:</label>
            <input type="text" class="form-control" id="lastName" formControlName="lastName" />
            <div class="form-text" *ngIf="contactForm.get('lastName')?.invalid && contactForm.get('lastName')?.touched">
                {{'form.lastname' | translate}} {{'form.mandatory' | translate}}.
            </div>
        </div>

        <div class="mb-3">
            <label for="birthday" class="form-label">{{'form.birthday' | translate}}:</label>
            <input type="date" class="form-control" id="birthday" formControlName="birthday" />
        </div>

        <div class="mb-3">
            <label for="position" class="form-label">{{'form.position' | translate}}:</label>
            <input type="text" class="form-control" id="position" formControlName="position" />
        </div>

        <div class="mb-3">
            <label for="email" class="form-label">{{'form.email' | translate}}:</label>
            <input type="email" class="form-control" id="email" formControlName="email" />
            <div class="form-text" *ngIf="contactForm.get('email')?.invalid && contactForm.get('email')?.touched">
                {{'form.email-validation' | translate}}.
            </div>
        </div>

        <div class="mb-3">
            <label for="phone" class="form-label">{{'form.phone' | translate}}:</label>
            <input type="text" class="form-control" id="phone" formControlName="phone" />
        </div>

        <div class="mb-3">
            <label for="image" class="form-label">{{'form.upload-image' | translate}}:</label>
            <input type="file" class="form-control" id="image" (change)="onFileSelected($event)" accept="image/*" />
        </div>

        <div class="mb-3">
            <div class="delete-image" (click)="onDeleteImage()">
                <img *ngIf="contact.imageUrl !== null" src="{{contact.imageUrl}}" width="40" height="40" />
                <p class="mb-0 ms-3">{{'system.delete-image' | translate}}</p>
            </div>
        </div>

        <button type="submit" class="btn btn-primary" [disabled]="contactForm.invalid">{{'form.send' | translate}}</button>
    </form>
</div>