Angular2 表单值

Question

我正在尝试制作一个表单来提交其值，如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>

但是updateTodo在调用时未定义。 这个功能已经实现了吗？

更新：

我想我知道如何让它工作http://angularjs.blogspot.no/2015/03/forms-in-angular-2.html

Answer 1

在 angular2 (alpha 26) 的当前版本中，我无法使这些示例工作。 看起来您现在被迫手动绑定值和更改事件。

这是您表单的完整 TypeScript 示例：

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();
    }
}

您当然可以通过将输入字段提取到组件中来清理表单标记：

@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();
    }
}

然后你将不得不更新你的 Todo 类的视图部分

@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

您还可以使用专为表单设计的 NgModel。 如果您使用<input [ng-model]="myModel.value" /> ，它会将模型的值绑定到视图，每当您更改模型时，视图都会更新。 现在，如果你想在视图改变时更新你的模型，你需要绑定事件，angular2 的绑定为你提供了一个很好的方法： <input [(ng-model)]="myModel.value" />这将保证您的视图和模型围绕双向绑定。

Answer 3

不包含大写字符。

它应该是：

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