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>

Angular2 form.value

3 个答案: