Module 3.3: Form

Since we just learned about passing data between the HTML and TypeScript files, let’s use that knowledge to make the form for new users to register - which will be on the register page!

We will want the following:

• an input field for the user’s email address

• a password field

• a password confirm field.

We will need variables to store each of those pieces of information, so we need to declare those variables in the global variable declarations portion of the TypeScript file! Open register.component.ts and declare the following 3 variables, right underneath where you declare the class, and right above the constructor().

  newUserEmail = '';
  newUserPassword = '';
  newUserPasswordConfirm = '';

Now let’s update the register.component.html file. Your file should look like this:

<div class="container">
 <div class="card text-white bg-dark">

   <div class="card-header">
     <h3>Register for an account</h3>
   </div>

   <div class="card-body">
     <div class="card text-white bg-secondary mb-3">
       <div class="card-body">

         <div class="form-group">
           <label for="emailInput">Email:</label>
           <input type="email" class="form-control form-control-lg" placeholder="[e-mail]" id="emailInput" autofocus>
         </div>

         <div class="form-group">
           <label for="passwordInput">Password:</label>
           <input type="password" class="form-control form-control-lg" placeholder="Password" id="passwordInput">
           <small class="form-text">*Password should be at least 6 characters long</small>
         </div>

         <div class="form-group">
           <label for="passwordConfirmInput">Confirm Password:</label>
           <input type="password" class="form-control form-control-lg" placeholder="Confirm Password" id="passwordConfirmInput">
         </div>

       </div>
     </div>
   </div>

   <div class="card-footer d-flex justify-content-end">
     <button class="btn btn-primary btn-md">Submit</button>
     <button class="btn btn-primary btn-md">Cancel</button>
   </div>

 </div>
</div>

And now lets make our register.component.css look like this:

.container {
     margin-bottom: 7.5rem;
     margin-top: 2rem;
}

/* Style the Submit and Cancel buttons */
.card-footer {
     margin-top: 2rem;
     background-color: #6c757d;
}
.btn {
     border: 0;
     font-weight: bold;
     letter-spacing: 0.75px;
     color: white;
     background-color: #343a40;
}
.btn:first-of-type {
     margin-right: 1rem;
}
.btn:hover {
     color: #343a40;
     background-color: #007bff;
}

Next, we need to link each variable to it’s related input tag, we can do this using ngModel as discussed before.

    <div class="form-group">
      <label for="emailInput">Email:</label>
      <input type="email" class="form-control form-control-lg" placeholder="[e-mail]" id="emailInput" autofocus [(ngModel)]="newUserEmail">
    </div>

    <div class="form-group">
      <label for="passwordInput">Password:</label>
      <input type="password" class="form-control form-control-lg" placeholder="Password" id="passwordInput" [(ngModel)]="newUserPassword">
      <small class="form-text">*Password should be at least 6 characters long</small>
    </div>

    <div class="form-group">
      <label for="passwordConfirmInput">Confirm Password:</label>
      <input type="password" class="form-control form-control-lg" placeholder="Confirm Password" id="passwordConfirmInput" [(ngModel)]="newUserPasswordConfirm">
    </div>

Now when anyone types in any of the input tags, that variable will be automatically updated with the new value! We aren’t really doing anything with that value yet, so let’s work on that next - doing something with that value. For now, we can just log the user’s email and password results to the console. Later, once we connect our website to Firebase, we can worry about pushing those values to Firebase and actually creating a user account.

When someone presses the “enter” key, or when they press the Submit button we want to run a function. Adjust your HTML code to include the following for all three input tags, as well as the submit button. Note: this is just part of your html from this file, we're just adding in the keyup.enter and click event on the submit button.

          <div class="form-group">
            <label for="emailInput">Email:</label>
            <input type="email" class="form-control form-control-lg" placeholder="[e-mail]" id="emailInput" autofocus [(ngModel)]="newUserEmail" (keyup.enter)="registerUser()">
          </div>

          <div class="form-group">
            <label for="passwordInput">Password:</label>
            <input type="password" class="form-control form-control-lg" placeholder="Password" id="passwordInput" [(ngModel)]="newUserPassword" (keyup.enter)="registerUser()">
            <small class="form-text">*Password should be at least 6 characters long</small>
          </div>

          <div class="form-group">
            <label for="passwordConfirmInput">Confirm Password:</label>
            <input type="password" class="form-control form-control-lg" placeholder="Confirm Password" id="passwordConfirmInput" [(ngModel)]="newUserPasswordConfirm" (keyup.enter)="registerUser()">
          </div>

        </div>
      </div>
    </div>

    <div class="card-footer d-flex justify-content-end">
      <button class="btn btn-primary btn-md" (click)="registerUser()">Submit</button>
      <button class="btn btn-primary btn-md">Cancel</button>
    </div>

Since we’ve told our HTML file to call the registerUserfunction when the user pressed enter or clicks the submit button. We should probably create that registerUser function! Open register.component.ts and create that function now. This is what the code for the whole file should look like:

export class RegisterComponent implements OnInit {
  newUserEmail = '';
  newUserPassword = '';
  newUserPasswordConfirm = '';
  constructor() { }

  ngOnInit() {
  }

  registerUser() {

   if (
     this.newUserEmail.trim() === '' ||
     this.newUserPassword.trim() === '' ||
     this.newUserPasswordConfirm.trim() === '' ||
     this.newUserPassword.trim() !== this.newUserPasswordConfirm.trim()
   ) {
     return;
   }
   console.log('newUser Email is:', this.newUserEmail);
   console.log('newUser Password is:', this.newUserPassword);
   console.log('newUser Password Confirmation is:', this.newUserPasswordConfirm);
  }
}

Serve up your website and check it out. Uh oh, we have an error! Let’s look into the error we’ve received. You should see this error: Can't bind to 'ngModel' since it isn't a known property of 'input'

Well, that looks like the kind of thing that we could Google and find an answer for. This is something that developers do constantly. Run into an error? Check for typos and then run to Google.

Practice time:

Take up to 5 minutes and search Google for that error. Pay attention to results from StackOverflow, and see if you figure out the problem.

Alright, so hopefully you discovered results related to importing FormsModule. Angular has grown very large - so large that it’s incredibly bulky, so the Angular team has split it into multiple parts, and developers only import the parts they need. Not every website needs to have forms, so the Angular team has broken the “forms” part out into its own self-contained module. Let’s import that module now, open app.module.ts and import the FormsModule.

import { FormsModule } from '@angular/forms';

We also need to import it for use like so:

imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    FormsModule
  ],

Check out your app now and it should be fixed, with no errors in the console! Now let’s test that registration form we just created. If you fail to complete the form, or your password and passwordConfirm fields don’t match then nothing should happen. If you’ve correctly filled it out, then you should see your answers printed to the console!

Since we’re at the end of a module, let’s do a quick git commit.

Next, we'll setup Firebase.

Firebase Setup