Skip to content

Instantly share code, notes, and snippets.

@anytizer
Created November 15, 2021 05:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anytizer/7988bb171be2c8c5843155112605f819 to your computer and use it in GitHub Desktop.
Save anytizer/7988bb171be2c8c5843155112605f819 to your computer and use it in GitHub Desktop.
Angular Signup Form with validations
<div class="w3-container w3-blue">
<h2>Signup</h2>
</div>
<form (ngSubmit)="onSubmit()" class="w3-container">
<div>
<p>Full Name</p>
<input [(ngModel)]="application.fullname" name="fullname" #fullname="ngModel" class="w3-input w3-leftbar w3-border w3-border-blue" type="text" required minlength="5" [placeholder]="application.fullname" _placeholde="John Doe" />
</div>
<div>
<p>Email</p>
<input [(ngModel)]="application.email" name="email" #email="ngModel" class="w3-input w3-leftbar w3-border w3-border-blue" type="email" required minlength="5" [placeholder]="application.email" />
</div>
<div>
<p>Phone Number</p>
<input [(ngModel)]="application.phonenumber" name="phonenumber" #phonenumber="ngModel" class="w3-input w3-leftbar w3-border w3-border-blue" type="tel" required minlength="10" [placeholder]="application.phonenumber" />
</div>
<div class="w3-panel w3-pale-red w3-padding" *ngIf="!valid_form()">
<div class="w3-text-red" *ngIf="fullname.touched && !fullname.valid">Full name is required.</div>
<div class="w3-text-red" *ngIf="email.touched && !email.valid">Email Address is required.</div>
<div class="w3-text-red" *ngIf="phonenumber.touched && !phonenumber.valid">Phone Number is required.</div>
</div>
<div class="w3-panel" *ngIf="!loading">
<span class="w3-button w3-purple" (click)="user_applies()">Submit</span>
</div>
</form>
{{application|json}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment