Learn Front-End Development and Automated Testing with Angular/

...

/

Build Signup Form

Build Signup Form

Let's build the signup form and the signup function that will be used to send and receive response.

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.

Press + to interact
//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.

Press + to interact
<!--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. ...