Ionic 2 表单验证问题与 formGroup 和 ngModel

Question

在我的 ionic 2 项目上演练之后，我试图实现一个看似简单的表单验证例程。

在我的控制器的构造函数中，我使用这样的FormBuilder来制作一个 formGroup：

this.form = formBuilder.group({
date: ['', Validators.required],
client: ['', Validators.required]
});

然后在模板中，我formControllerName属性添加到相关元素中，如下所示：

<ion-select formControlName="client" [(ngModel)]="clientId">

并将根元素绑定到"formGroup"，如下所示：

<ion-content [formGroup]="form">

此操作失败，并显示以下错误消息：

ngModel 不能用于向父级注册表单控件 形式组指令。 尝试使用 formGroup 的合作伙伴指令改为"formControlName"。 例：

<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:
Example:

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

正如错误消息以及这个 StackOverflow 线程所建议的那样，我[ngModelOptions]="{standalone: true}"添加到我的输入中，但它返回了另一条错误消息：

模板解析错误：无法绑定到"ngModelOptions"，因为它不是 "离子选择"的已知属性。

Answer 1

在 angular2 中，您可以选择使用"旧"(更 AngularJS-y)模板驱动的方式，通过使用[(ngModel)]创建与组件变量的双向绑定：

元件：

private clientId: string;

模板：

<form>
<input [(ngModel)]="clientId" required />
</form>

如果我把事实放在一起，这将在幕后为<form>元素创建一个FormGroup实例，并为其中的每个输入创建一个FormControl实例。然后，所需的指令将在其上应用验证器并触发验证(例如相应地应用 ng-valid/valid)。

使用这种方法，您只需使用clientId即可获取值。

使用模型驱动(或"响应式")方法是使用FormBuilder定义表单的"模式"，或者简单地创建FormGroup和FormControl的实例......

它看起来像这样：

元件：

private form: FormGroup;
ngOnInit() {
this.form = new FormGroup({
clientId: new FormControl('', [Validators.required])
});
}

模板：

<form [formGroup]="form">
<input formControlName="clientId" />
</form>

在这种情况下，如果你想要整个表单的值，你将访问(this.)form.value在这个例子中，它将返回一个对象，如下所示：

{ clientId: "whatever" }

或者，如果您只想要内部控件的值，请获取(this.)form.controls['clientId'].value。

希望我把事情说得更清楚，而不是更糟:)

编辑：使用后一种方法意味着您可以访问FormControl的Observable并做一些有趣的事情，例如：

let debouncedInput$ = this.form.control['clientId'].valueChanges.debounceTime(1000);