Angular2 form.value

głosy
2

Staram się, aby złożyć formularz do jego wartości jak pokazano na 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>

ale updateTodo dostaje Undefine przy wywołaniu. Czy ta funkcjonalność została już wdrożona?

AKTUALIZACJA:

Chyba wiem, jak zrobić to działa http://angularjs.blogspot.no/2015/03/forms-in-angular-2.html

Utwórz 18/03/2015 o 13:05
źródło użytkownik
W innych językach...                            


3 odpowiedzi

głosy
2

W obecnej wersji angular2 (alfa 26), nie jestem w stanie zrobić te próbki pracy. Wydaje się, że dla ciebie teraz zmuszeni są do wiązania wartości i zmienić podręcznik wydarzeń.

Powyżej znajduje się pełna próbka maszynopis swojej postaci:

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

Można oczywiście oczyścić znaczników formularz przez ekstrakcję pola wejściowe 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();
    }
}

A potem trzeba by zaktualizować udział wyświetl klasy 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>`
})
Odpowiedział 15/06/2015 o 04:29
źródło użytkownik

głosy
0

Można również użyć NgModel, który został zaprojektowany dla form. Jeśli używasz <input [ng-model]="myModel.value" />, będzie ona wiązać wartość modelu do widoku, kiedy tylko zmieni swój model widok zostanie zaktualizowany. Teraz, jeśli chcesz zaktualizować swój model, gdy widok robi się zmienić, trzeba powiązać zdarzenie, a wiązanie angular2 daje piękny sposób to zrobić: <input [(ng-model)]="myModel.value" />to gwarantuje, że Twój widok i model wokół dwukierunkowych oprawionego ,

Odpowiedział 05/08/2015 o 13:28
źródło użytkownik

głosy
0

Nie zawierają znak wielkiej litery.

Powinno być:

<form #todoform [new-control-group]="todo">
  <input control-name="description">
  <input control-name="checked">
  <button (click)="updateTodo(todoform.value)">Update</button>
</form>
Odpowiedział 15/12/2015 o 02:25
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more