如何在角度2中使用类数据类型的ngModel?

时间:2017-09-08 19:55:23

标签: angular class angular-ngmodel two-way-binding

我想在angular 2项目中使用类实例进行双向数据绑定。可能吗? 我缩短代码以便于理解

    ---- typescript ----

export class PackageOption {
    name: string;
    description: string;
...
}
import  { PackageOption }  from "./packageoption";
class PackageComponent extends Component implements OnInit {
    ...
    packageOptCurrent: PackageOption;
    ngOnInit() {
        this.packageOptCurrent = new PackageOption();
    }
...
}
    ---- templete ----
       <form [formGroup]="packageOptAddForm" #f="ngForm">
                <input type="text" formControlName="name" name="name" [(ngModel)] = "packageOptCurrent.name">
       </form>

我试过但是我收到了这个错误

ngModel不能用于使用父formGroup指令注册表单控件。尝试使用           而是formGroup的合作伙伴指令“formControlName”。例如:

    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

或者,如果您想避免注册此表单控件,请指明它在ngModelOptions中是独立的:

  Example:


<div [formGroup]="myGroup">
   <input formControlName="firstName">
   <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
</div>

由于

1 个答案:

答案 0 :(得分:0)

这应该是可能的,但是,您必须使用组件装饰器在类的上下文中声明实例。例如

//import typescript person class

@component({
    //some configuration
})
export class SomeClassComponent {
   mPerson = new Person();
}