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>