Angular 2 - why do we need to use ngForm if we use custom validation?
<p>Hello to everyone who using Angular, and the last Angular2.</p>

<p>I'm working with the forms right now and I see that I'm using custom validation (for example: <a href="https://www.w3.org/TR/html-markup/datatypes.html#form.data.emailaddress" rel="nofollow">native email validation</a> doesn't support non-latin symbols, or we need phone validation, or something else) and <code>[(ngModel)]</code> instead of <code>ngControl</code> and <code>Validators</code>.</p>

<p>So why do we need to use <code>ngForm</code> with <code>FormBuilder</code>, if we can just define <code>Object</code> in the constructor?</p>

<p>Simple example:</p>

<p><code>ngForm</code>:</p>

<pre><code>import {FormBuilder, Validators, FORM_DIRECTIVES, AbstractControl, ControlGroup} from 'angular2/common';

@Component({
  selector: 'form',
  template: `&lt;form [ngFormModel]="ourForm" (ngSubmit)="doSubmit()"&gt;
      &lt;input ngControl="ourinput" placeholder="Our input" type="text"&gt;
      &lt;span class="error-message" [class.hidden]="!error"&gt;{{message}}&lt;/span&gt;
      &lt;button&gt;Submit&lt;/button&gt;
    &lt;/form&gt;`,
  directives: [FORM_DIRECTIVES]
})

export class someFormCmp {
  ourForm: ControlGroup;
  error: boolean;
  message: string;

  constructor(
    fb: FormBuilder
  ) {
    let some = this;

    some.ourForm = fb.group({
      ourinput: ['Something...', Validators.required]
    });
    some.error = false;
    some.message = '';
  }

  doSubmit() {
    let some = this;

    // our custom validation
    if (!valid(some.ourForm.controls['ourinput'].value)) {
      some.error = true;
      some.message = 'Field is not valid';
    }

    if (!error) {
      // some tasks what we'll do next
    }
  }
}
</code></pre>

<p>VS</p>

<p><code>ngModel</code>:</p>

<pre><code>@Component({
  selector: 'form',
  template: `&lt;form (ngSubmit)="doSubmit()"&gt;
      &lt;input [(ngModel)]="ourinput" placeholder="Our input" type="text"&gt;
      &lt;span class="error-message" [class.hidden]="!error"&gt;{{message}}&lt;/span&gt;
      &lt;button&gt;Submit&lt;/button&gt;
    &lt;/form&gt;`
})

export class someFormCmp {
  ourForm: any;
  error: boolean;
  message: string;

  constructor() {
    let some = this;

    some.ourForm = {
      ourinput: 'Something'
    };
    some.error = false;
    some.message = '';
  }

  doSubmit() {
    let some = this;

    // our custom validation
    if (!valid(some.ourForm.ourinput)) {
      some.error = true;
      some.message = 'Field is not valid';
    }

    if (!error) {
      // some tasks what we'll do next
    }
  }
}
</code></pre>

<p>There is no big difference if there are one, two, three fields. But if there are 6, 10, or more fields and we are using custom validation, then it is hard to maintain this code.</p>