Digging into the template-driven form’s markup

As the next step, let’s create the template of the AddDeveloper component (step-1/add_developer.html). Add the following content to the file:

<span *ngIf="errorMessage"
       class="alert alert-danger">{{errorMessage}}</span>
<span *ngIf="successMessage"
       class="alert alert-success">{{successMessage}}</span>

These two elements are intended to display the error and success messages when adding a new developer. They are going to be visible when errorMessage and successMessage respectively have non-falsy values (that is, something different from the empty string, false, undefined, 0, NaN, or null).

Now let’s develop the actual form:

<form #f="ngForm" (ngSubmit)="addDeveloper()"
      class="form col-md-4" [hidden]="submitted">
  <div class="form-group">
    <label class="control-label"
           for="realNameInput">Real name</label>
    <div>
      <input id="realNameInput" class="form-control"
             type="text" ngControl="realName" required
             [(ngModel)]="developer.realName">
    </div>
  </div>
  <button class="btn btn-default"
          type="submit" [disabled]="!f.form.valid">Add</button>
  <!-- MORE CODE TO BE ADDED -->
</form>

We declare a new form using the HTML form tag. Once Angular 2 finds such tags in a template with an included form directive in the parent component, it will automatically enhance its functionality in order to be used as an Angular form. Once the form is processed by Angular, we can apply form validation and data-bindings. After this, using #f="ngForm", we will define a local variable for the template called f, which allows us to reference to the current form. The last thing left from the form element is the submit event handler. We use a syntax that we’re already familiar with (ngSubmit)="expr", where in this case, the value of the expression is the call of the addDeveloper method attached to the component’s controller.

Now, let’s take a look at the div element with class name control-group.

Note

Note that this is not an Angular-specific class; it is a CSS class defined by Bootstrap that we use in order to provide a better look and feel to the form.

Inside of it, we can find a label element that doesn’t have any Angular-specific markup and an input element that allows us to set the real name of the current developer. We set the control to be of a type text and declare its identifier to equal realNameInput. The required attribute is defined by the HTML5 specification and is used for validation. By using it on the element, we declare that it is required for this element to have a value. Although this attribute is not Angular-specific using the ngControl attribute, Angular will extend the semantics of the required attribute by including validation behavior. This behavior includes setting specific CSS classes on the control when its status changes and managing its state that the framework keeps internally.

The ngControl directive is a selector of the NgControlName directive. It enhances the behavior of the form controls by running validation over them for the change of their values, and applying specific classes during the controls’ life cycle. You might be familiar with this from AngularJS 1.x where the form controls are decorated with the ng-pristine, ng-invalid, and ng-valid classes, and so on, in specific phases of their lifecycle.