139 lines
4 KiB
HTML
139 lines
4 KiB
HTML
<section>
|
|
<form
|
|
(ngSubmit)="onSubmit(contactForm)"
|
|
(keyup)="updateFormData()"
|
|
#contactForm="ngForm"
|
|
onsubmit="return false"
|
|
class="contact-formular"
|
|
>
|
|
<div class="name">
|
|
<input
|
|
id="firstName"
|
|
type="text"
|
|
class="firstName"
|
|
name="firstName"
|
|
#firstName="ngModel"
|
|
placeholder="{{
|
|
contactData.firstName !== ''
|
|
? contactData.firstName
|
|
: ('contactDialogForm.firstName' | translate)
|
|
}}"
|
|
[(ngModel)]="contactData.firstName"
|
|
autocomplete="off"
|
|
required
|
|
/>
|
|
@if (sharedService.isContactViewMedia) {
|
|
<div class="error-msg">
|
|
@if (!firstName.valid && firstName.touched) {
|
|
<p>{{ "contactDialogForm.invalidFirstName" | translate }}</p>
|
|
}
|
|
</div>
|
|
}
|
|
<input
|
|
id="lastName"
|
|
type="text"
|
|
class="lastName"
|
|
name="lastName"
|
|
#lastName="ngModel"
|
|
placeholder="{{
|
|
contactData.lastName !== ''
|
|
? contactData.lastName
|
|
: ('contactDialogForm.lastName' | translate)
|
|
}}"
|
|
[(ngModel)]="contactData.lastName"
|
|
autocomplete="off"
|
|
required
|
|
/>
|
|
</div>
|
|
@if (sharedService.isContactViewMedia) {
|
|
<div class="error-msg">
|
|
@if (!lastName.valid && lastName.touched) {
|
|
<p>{{ "contactDialogForm.invalidLastName" | translate }}</p>
|
|
}
|
|
</div>
|
|
} @if (!sharedService.isContactViewMedia) {
|
|
<div class="error-msg">
|
|
@if ((!firstName.valid && firstName.touched) && (!lastName.valid &&
|
|
lastName.touched)) {
|
|
<p>{{ "contactDialogForm.invalidName" | translate }}</p>
|
|
} @else { @if (!firstName.valid && firstName.touched) {
|
|
<p>{{ "contactDialogForm.invalidFirstName" | translate }}</p>
|
|
} @else { @if (!lastName.valid && lastName.touched) {
|
|
<p>{{ "contactDialogForm.invalidLastName" | translate }}</p>
|
|
} } }
|
|
</div>
|
|
}
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
name="email"
|
|
#email="ngModel"
|
|
placeholder="{{
|
|
contactData.email !== ''
|
|
? contactData.email
|
|
: ('contactDialogForm.email' | translate)
|
|
}}"
|
|
[(ngModel)]="contactData.email"
|
|
autocomplete="off"
|
|
required
|
|
/>
|
|
<div class="error-msg">
|
|
@if(!email.valid && email.touched &&
|
|
!checkIfUserEmailIsValid(contactData.email)) {
|
|
<p>{{ "contactDialogForm.invalidMail0" | translate }}</p>
|
|
} @else { @if (email.touched &&
|
|
!checkIfUserEmailIsValid(contactData.email)) {
|
|
<p>{{ "contactDialogForm.invalidMail1" | translate }}</p>
|
|
} @else { @if (existEmailonServer(contactData.email).length > 0 &&
|
|
!contactData.email) {
|
|
<p>{{ "contactDialogForm.invalidMail2" | translate }}</p>
|
|
} } }
|
|
</div>
|
|
<input
|
|
id="phone"
|
|
type="phone"
|
|
name="phone"
|
|
#phone="ngModel"
|
|
placeholder="{{
|
|
contactData.phone !== ''
|
|
? contactData.phone
|
|
: ('contactDialogForm.phone' | translate)
|
|
}}"
|
|
[(ngModel)]="contactData.phone"
|
|
pattern="[0-9]{7,10}"
|
|
autocomplete="off"
|
|
required
|
|
/>
|
|
<div class="error-msg">
|
|
@if (!phone.valid && phone.touched) {
|
|
<p>{{ "contactDialogForm.invalidPhone" | translate }}</p>
|
|
}
|
|
</div>
|
|
<div class="btns">
|
|
<app-form-btn
|
|
class="btn-delete"
|
|
type="button"
|
|
value="{{ 'contactDialogForm.btnDelete' | translate }}"
|
|
(click)="deleteContact()"
|
|
></app-form-btn>
|
|
<app-form-btn
|
|
[class]="'btn-submit'"
|
|
[type]="'submit'"
|
|
[img]="'check'"
|
|
[imgFilter]="'none'"
|
|
value="{{ 'contactDialogForm.btnSave' | translate }}"
|
|
[disabled]="
|
|
firstName.invalid ||
|
|
!contactData.firstName ||
|
|
lastName.invalid ||
|
|
!contactData.lastName ||
|
|
email.invalid ||
|
|
!contactData.email ||
|
|
phone.invalid ||
|
|
!contactData.phone ||
|
|
!checkIfUserEmailIsValid(contactData.email)
|
|
"
|
|
></app-form-btn>
|
|
</div>
|
|
</form>
|
|
</section>
|