Search⌘ K
AI Features
Home
Courses
Learn Front-End Development and Automated Testing with Angular

Build Signup Form

Explore how to build a user signup form using Angular's FormsModule. Learn to bind input fields with ngModel, handle form submission with ngSubmit, and implement signup logic calling an authentication service. Understand how to capture and log responses as a step towards user authentication and routing.

We'll cover the following...

Our signup module routing is ready. In this lesson, let’s replace the default signup markup with our signup form.

This is our updated application so far:

�PNG


IHDR?�~�	pHYs��~�fIDATH��WKLQ���̔�uG��	e�n�.6qcb�l?���D`�F#�
Ku�F
1Qc�
��!����	��C�P�|B?$���ܱ3����I&}��}�̽s�[*�ɀU�A��K��yx�gY�Ajq��3L	Š���˫�OD�4��3Ϗ:X�3��o�PJ�ğo#IH�a����,{>1/�2$�R	AR]�)w��?�sZw^��q�Y�m_��e���r[8�^�
�&p��-���A}c��- ������!����2_)E�)㊪j���v�m��ZOi�g�nW�{<n8�P����o�=$8�K��9|$����@��v�P<�j�>�n.|�e2�a&�0aŸ����be�̀��C�fˤE%-{�ֺ��׮C��N��jXi�~c�C,t��T�����r�{� �L)s��V��6%�(�#ᤙ!�]��H�ҐH$R���^R�A�61(?Y舚�>���(Z����Qm�L2�K�ZIc��
���̧�C��2!⅄�(����"�Go��>�q��=��$%�z`ѯ��T�&����PHh�Z!=���z��O��������,*VVV�1�f*CJ�]EE��K�k��d�#5���`2yT!�}7���߈~�,���zs�����y�T��V������D��C2�G��@%̑72Y�޾{oJ�"@��^h�~��fĬ�!a�D��6���Ha|�3��� [>�����]7U2п���]�ė
��PU��.Wejq�in�g��+p<ߺQH����總j[������.���	Q���p _�K��1(��+��bB8�\ra
�́�v.l���(���ǽ�w���L��w�8�C��IEND�B`�
Signup feature

Signup form

With our route configured, we’re now ready to create our user signup form. First, add Angular’s FormsModule to our SignupModule in the code above.

TypeScript 3.3.4
//src/app/signup/signup.module.ts
import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [
    CommonModule,
    SignupRoutingModule,
    FormsModule
  ],
  declarations: [SignupComponent]
})

Now, the template can use the functionality provided by FormsModule. Update signup.component.html with the following markup.

HTML
<!--src/app/signup/signup.component.html-->
<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <form #form="ngForm" (ngSubmit)="signup(form.value)">
        <div class="form-group">
          <label for="username">Username</label>
          <input placeholder="Username"
                  class="form-control"
                  id="username"
                  name="username"
                  type="text"
                  [(ngModel)]="user.username">
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input placeholder="Password"
                  class="form-control"
                  id="password"
                  name="password"
                  type="password"
                  [(ngModel)]="user.password">
        </div>
        <div class="form-group">
          <button class="btn btn-default" type="submit">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

  1. At line 6, declare what’s known as a template variable for our form, #form, as a reference to Angular’s ngForm directive. ...