NativeScript/Angular - 反应形式不起作用答案

【问题标题】：NativeScript/Angular - Reactive form not workingNativeScript/Angular - 反应形式不起作用
【发布时间】：2017-04-02 10:37:03
【问题描述】：

在组件中我正在这样做：

public loginForm: FormGroup = this.fb.group({
  email: ['', Validators.required],
  password: ['', Validators.required]
});

然后在模板中绑定表单：

<StackLayout orientation="vertical" [formGroup]="loginForm">
  <TextField formControlName="email" hint="Email"></TextField>
  <TextField formControlName="password" hint="Password" secure="true"></TextField>
  <Button text="Log in" (tap)="login()"></Button>
</StackLayout>

但是当我在运行login 函数时记录loginForm 值时，即使文本字段有值，它仍然是空的..

我已经导入了ReactiveFormsModule 和NativeScriptFormsModule，但都不起作用。如果我将password 更改为任何随机名称，我也不会收到错误或任何错误。所以它就像它甚至没有以任何方式连接到表单。

我做错了什么？我在 nativescript cli 2.5+ 上，这表明该代码应该可以工作。

编辑：

我已经进行了一些挖掘，似乎延迟加载模块是导致此问题以及其他问题的原因。我在这里提出了一个新问题：

https://github.com/NativeScript/nativescript-angular/issues/735

很高兴听到其他人是否遇到过同样的问题以及是否有解决方案。

【问题讨论】：

标签： nativescript angular2-nativescript angular2-formbuilder reactive-forms

【解决方案1】：

确保将ReactiveFormsModule 和NativeScriptFormsModule 导入到实际组件的模块imports (Login.Module.ts) 中，而不仅仅是AppModule，否则它将无法工作！

我这样做了，然后 Reactive Forms 立即起作用。

【讨论】：

【解决方案2】：

由于您已经导入了 NativeScriptFormsModule，请在 FormGroup 之外声明一个新变量并尝试将您的 texfield 构建为：

<TextField hint="Email" [(ngModel)]="yourEmailVariable"></TextField>

【讨论】：

我会，但FormBuilder 不使用 ngModel，没有必要重新声明一堆表单控件。我已经进行了一些挖掘，看来延迟加载是导致问题的原因。我在这里提出了一个新问题：github.com/NativeScript/nativescript-angular/issues/735