Angular Routing & Forms based Demo application

Week-04/Day_05/student-routing-form/src/app/register/register.html

@@ -0,0 +1,75 @@
+<h2>Student Registration Form</h2>
+
+<form #studentForm="ngForm" (ngSubmit)="onSubmit(studentForm)">
+
+  <!-- Name -->
+  <label>Name:</label>
+  <input type="text" name="name" ngModel required #name="ngModel">
+
+  <div class="error" *ngIf="name.invalid && name.touched">
+    Name is required
+  </div>
+
+  <br><br>
+
+  <!-- Email -->
+  <label>Email:</label>
+  <input type="email"
+         name="email"
+         ngModel
+         required
+         email
+         #email="ngModel">
+
+  <div class="error" *ngIf="email.invalid && email.touched">
+
+    <div *ngIf="email.errors?.['required']">
+      Email is required
+    </div>
+
+    <div *ngIf="email.errors?.['email']">
+      Enter valid email (must include @)
+    </div>
+
+  </div>
+
+  <br><br>
+
+  <!-- Password -->
+  <label>Password:</label>
+  <input type="password"
+         name="password"
+         ngModel
+         required
+         minlength="8"
+         #password="ngModel">
+
+  <div class="error" *ngIf="password.invalid && password.touched">
+
+    <div *ngIf="password.errors?.['required']">
+      Password is required
+    </div>
+
+    <div *ngIf="password.errors?.['minlength']">
+      Password must be at least 8 characters
+    </div>
+
+  </div>
+
+  <br><br>
+
+  <!-- Course -->
+  <label>Course:</label>
+  <input type="text" name="course" ngModel required #course="ngModel">
+
+  <div class="error" *ngIf="course.invalid && course.touched">
+    Course is required
+  </div>
+
+  <br><br>
+
+  <button type="submit" [disabled]="studentForm.invalid">
+    Submit
+  </button>
+
+</form>