Building custom forms with validations

No matter how well you present a form with instructions to users, there's always the need to check the correctness of the data submitted. In template-driven forms, the ngForm holds the form's value and state, which can be queried for correctness. Each input that is mapped to ngModel is part of the form and has its own value and validity status. Angular creates a FormControl for this mapped input behind the scenes in the template-driven approach. The form's status and validity is a result of the collective status and validity of its child form controls. Even if one form control is invalid then the entire form is marked as invalid:

<form class="form-inline" (ngSubmit)="onSave(userForm)"
                                             #userForm="ngForm"> 
    <input type="text" class...