Angular 2窗体内的组件

kor*_*ead 5 angular

所以这是我的父母表格:

<form [ngFormModel]="formModel">
    <ui-form-control *ngFor="#key of controlsKeys"
                     [control]="formModel.controls[key]"
                     [name]="key">
    </ui-form-control>
</form>
Run Code Online (Sandbox Code Playgroud)

这是我的组件:

@Component({
    selector: 'ui-form-control'
})
@View({
    template: `
    <label>{{name}}: </label>
    <input [ngFormControl]="control" [placeholder]="name">
    `,
    directives: [FORM_DIRECTIVES]
})
export class UiFormControl{
    @Input() control: UiControl;
    @Input() name: string;

    constructor(){
    }
}
Run Code Online (Sandbox Code Playgroud)

我可以在ui-form-component中看到Control值,但是当我更改它时,formModel-ComponentGroup不会更新。因此,似乎两种绑定方式在这里不起作用。

实际上,如果我删除我的标签<ui-form-control>并放置简单<input>标签,它将正常工作,并且formModel将按预期更新。

Per*_*eck -1

您期望哪种两种方式绑定?

您可以通过将属性设置为(单向)绑定和事件来获得双向绑定。实际上还有更多的事情要做,但快捷方式很简单,如下所示:

<input [(ng-model)]="myField" >
Run Code Online (Sandbox Code Playgroud)

您可以在Victor Savkins 博客中阅读更多内容。