Question

我试图在我的离子2项目中实现this walk-through之后看似简单的表单验证例程。

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

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

然后在模板中我将formControllerName属性添加到相关元素中：

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

将root元素绑定到＆＃39; formGroup`，如下所示：

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

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

ngModel不能用于向父级注册表单控件 formGroup指令。尝试使用 formGroup的合作伙伴指令＆＃34; formControlName＆＃34;代替。例如：

<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>

根据错误消息的建议，以及this StackOverflow thread我向我的输入添加了[ngModelOptions]="{standalone: true}"，但它又返回了另一条错误消息：

模板解析错误：无法绑定到＆＃39; ngModelOptions＆＃39;因为它不是一个已知的“离子选择”属性。

Answer 1

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

组件：

private clientId: string;

模板：

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

如果我得到了相同的事实，这将在幕后为FormGroup元素创建一个<form>实例，并为其中的每个输入创建一个FormControl实例。然后，required指令将在其上应用验证器并触发验证（例如，相应地应用ng-valid / invalid）。

使用此方法，您只需使用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。

希望我让事情变得更清楚，而不是更糟：）

修改使用后一种方法意味着您可以访问Observable的{{1}}并执行一些有趣的操作，例如：

FormControl

Ionic 2与formGroup和ngModel形成验证问题

1 个答案: