angular - Forms In angular2

Question

Bit confused about how to use Forms(template or modal driven froms) in the angular2 beta.

currently i am using modal driven forms but getting some error here is my form.html:

<form [ngFormModel]="demo">
        <input type="text"  [ngFormControl]="demo.controls['name']">
        <input type="text"  [ngFormControl]="demo.controls['batch']">
        <div> 
            <input type="radio" [ngFormControl]="demo.controls['radio']" name="status" value="true"> Active
            <input type="radio" [ngFormControl]="demo.controls['radio']" name="status" value="false">Inactive 
        </div>
        <div> 
            <input type="checkbox" [ngFormControl]="demo.controls['checkbox']" name="one" value="one"> one
            <input type="checkbox" [ngFormControl]="demo.controls['checkbox']" name="two" value="two">two 
        </div>
        <select [ngFormControl]="demo.controls['select']">
            <option value="one">Oone</option>
            <option value="two">two</option>
            <option value="three">three</option>
            <option value="four">four</option>
        </select>
        <button type="button" class="btn btn-primary btn-lg" data-dismiss="modal" (click)="demoSubmit(demo.value)">Done</button>
</form>

and form.ts file is here:

import {Component, View} from 'angular2/core';
import {FORM_DIRECTIVES, CORE_DIRECTIVES, FormBuilder, Control, ControlGroup} from 'angular2/common';
import {ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
    selectro: 'Form',
    templateUrl: 'src/components/form/form.html',
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
})
export class FormDemo{
    demo:ControlGroup;
    constructor(fb:FormBuilder){
        console.log("Form Called");

        this.demo= fb.group({
            name: ["pardeep"],
            batch: [],
            checkbox: [],
            radio: [],
            select: []
        })
    }
    demoSubmit (){
        console.log(JSON.stringify(this.demo.value));
    }
}

so, my questions is:

1. which form is best template or modal driven and why ?
2. when to use ngControl and when to use ngModal ?

PS:- in this example i am unable to get the values of radio button and check-box selected am i doing something wrong, in this example i am modal driven form From here?

any good reference or example is welcome. thanks.

Answer 1

I'm guessing that by ngModal you mean ngModel.

"1-which form is best template or modal driven and why ?"

from: http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/

To create a new ControlGroup and Controls implicitly use:

ngForm and ngControl

To bind to an existing ControlGroup and Controls use:

ngFormModel and ngFormControl

Basically one is more convenient but gives you less control, personally I try to use template driven first because its more simple and less code, until it is not enough then I switch to model driven.

2- When to use ngControl and when to use ngModel ?

I don't know if you are mixing concepts here but ngControl and ngModel are not precisely meant to replace each other, ngModel handles the sync between input components and your domain/presentation model while ngControl handles the state of the form based on Validators, dirtiness of the input, etc, more geared towards giving feedback and allowing/stopping the user from submitting an unvalid form.

The ones that could replace each other are the one I mentioned previously in answer 1.

I hope that helps clarify a little bit?

As for the values of checkbox and radios, you only have ngFormControl's on them, add ngModel to map their values into your model. Once again quoting from the same page:

<input type="text" id="productNameInput" placeholder="Product Name" [ngFormControl]="myForm.find('productName')" [(ngModel)]="productName">

You can see that he is using both the ngFormControl and the ngModel.