rajukottedi/portfolio.web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

contact form validations on submit

Browse Source
This commit is contained in:
Bangara Raju Kottedi
2024-05-05 15:54:26 +05:30
parent fc5de6587b
commit fd43f9c1e6
3 changed files with 37 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/contact/contact.component.html
+8 -8
View File
@@ -16,27 +16,27 @@
<h3 class="h3 form-title">Contact Form</h3>
<form class="form" #messageForm="ngForm" (ngSubmit)="sendMessage()">
<form class="form" #messageForm="ngForm" (ngSubmit)="sendMessage(messageForm)" autocomplete="off">
<div class="input-wrapper">
<div>
<input type="text" name="fullname" maxlength="20" #fullName="ngModel" autocomplete="off" [(ngModel)]="messageModel.name" class="form-input" placeholder="Full name" required>
<em class="error" *ngIf="fullName.errors?.['required'] && fullName.touched">Full name is required</em>
<input type="text" name="fullname" maxlength="20" #fullName="ngModel" autocomplete="new" [(ngModel)]="messageModel.name" class="form-input" placeholder="Full name" required>
<em class="error" *ngIf="(fullName.errors?.['required']) && fullName.touched">Full name is required</em>
</div>
<div>
<input type="email" name="email" email #email="ngModel" autocomplete="off" [(ngModel)]="messageModel.fromEmail" class="form-input" placeholder="Email address" required>
<em class="error" *ngIf="email.errors?.['email'] && email.touched">Must be a valid email format</em>
<em class="error" *ngIf="email.errors?.['required'] && email.touched">Email is required</em>
<input type="email" name="email" email #email="ngModel" autocomplete="new" [(ngModel)]="messageModel.email" class="form-input" placeholder="Email address" required>
<em class="error" *ngIf="(email.errors?.['email'] && !email.errors?.['required']) && email.touched">Must be a valid email format</em>
<em class="error" *ngIf="(email.errors?.['required']) && email.touched">Email is required</em>
</div>
</div>
<div class="text-area">
<textarea name="message" #message="ngModel" autocomplete="off" maxlength="500" [(ngModel)]="messageModel.content" class="form-input" placeholder="Your Message" required></textarea>
<em class="error" *ngIf="message.errors?.['required'] && message.touched">Message is required</em>
<em class="error" *ngIf="(message.errors?.['required']) && message.touched">Message is required</em>
</div>
<button class="form-btn" type="submit" [disabled]="messageForm.form.invalid && messageForm.form.touched">
<button class="form-btn" type="submit" [disabled]="messageForm.form.invalid && submitted">
<i class="fa-regular fa-paper-plane"></i>
<span>Send Message</span>
</button>