Angular2 form.value

Question

I'm trying to make a form to submit its value like shown in http://victorsavkin.com/post/108837493941/better-support-for-functional-programming-in :

<form #todoForm [new-control-group]="todo">
  <input control-name="description">
  <input control-name="checked">
  <button (click)="updateTodo(todoForm.value)">Update</button>
</form>

but updateTodo gets undefine when invoked. Has this functionality been already implemented?

UPDATE:

I think I know how to make it working http://angularjs.blogspot.no/2015/03/forms-in-angular-2.html

Answer 1

In the current version of angular2 (alpha 26), I'm not able to make those samples work. It seems like you for now are forced to bind value and change events manual.

Here is a complete TypeScript sample of your form:

import {Component, View} from 'angular2/angular2';
import {formDirectives, FormBuilder, Control, ControlGroup} from 'angular2/forms';


@Component({
    selector: 'todo-app',
    injectables: [FormBuilder]
})
@View({
    directives: [  formDirectives],
    template: `<form [control-group]="todo">
  <input #desc [value]="todo.controls.description.value" (keyup)="setControlValue('description', desc.value)">
  <input #chk [checked]="todo.controls.checked" type="checkbox" (change)="setControlValue('checked', chk.checked)">
  <button (click)="updateTodo($event)">Update</button>
</form>`
})
export class Todo{
    todo:ControlGroup;

    constructor(builder:FormBuilder){
        this.todo = builder.group({
            description: new Control('First todo'),
            checked: new Control(true)
        })
    }

    updateTodo(event){
        event.preventDefault();
        console.log(this.todo.controls.description.value);
        console.log(this.todo.controls.checked.value);
    }

    setControlValue(controlName, value){
        this.todo.controls[controlName].updateValue(value);
        this.todo.controls[controlName].markAsDirty();
    }
}

You could of course clean up the form markup by extracting the input fields into compoenents:

@Component({
    selector: 'input-text',
    properties: ['control']
})
@View({
    template: `<input #ctrl [value]="control.value" (keyup)="setValue(ctrl.value)">`
})
export class InputText{
    control: Control;
    constructor(){
        this.control = new Control('');
    }
    setValue(value){
        this.control.updateValue(value);
        this.control.markAsDirty();
    }
}

@Component({
    selector: 'input-checkbox',
    properties: ['control']
})
@View({
    template: `<input #ctrl [checked]="control.value" (change)="setValue(ctrl.checked)" type="checkbox">`
})
export class InputCheckbox{
    control: Control;
    constructor(){
        this.control = new Control('');
    }
    setValue(value){
        this.control.updateValue(value);
        this.control.markAsDirty();
    }
}

And then you would have to update the view part of your Todo class

@View({
    directives: [formDirectives, InputText, InputCheckbox],
    template: `<form [control-group]="todo">
    <input-text [control]="todo.controls.description"></input-text>
    <input-checkbox [control]="todo.controls.checked"></input-checkbox>
    <button (click)="updateTodo($event)">Update</button>
</form>`
})

Answer 2

You can also use NgModel which is designed for forms. If you use <input [ng-model]="myModel.value" /> , it'll bind the value of the model to the view, whenever you change your model the view will be updated. Now, if you want to update your model when the view gets to change, you need to bind the event, and the binding of angular2 gives you a nice way to do this : <input [(ng-model)]="myModel.value" /> this will guarantee that your view and model around two-way bound.

Answer 3

Not contain uppercase character.

It should be:

<form #todoform [new-control-group]="todo">
  <input control-name="description">
  <input control-name="checked">
  <button (click)="updateTodo(todoform.value)">Update</button>
</form>