Ionic 2/3：同时将数据绑定到提供者，并使用表单验证

Question

我的应用程序中有一些数据绑定，它们绑定到提供程序，但现在我想添加一些表单验证。问题是当我开始尝试将[(ngModel)] 与表单验证一起使用时出现错误。

我得到的错误信息表明：

ngModel 不能用于向父级注册表单控件 formGroup 指令。尝试使用 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>

如果我让它独立（[ngModelOptions]=\"{standalone: true}）然后我开始收到错误（Template parse errors: Can't bind to 'ngModelOptions' since it isn't a known property of 'ion-input'.），但除此之外，表单验证似乎也不起作用。另一方面，如果我删除了 ngModel，那么数据将不再绑定到我的提供程序。

这是我的代码的一个非常简略的版本：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CaseProvider } from '../../providers/caseProvider';

@Component({
  selector: 'page-form',
  template: `
<ion-header>
</ion-header>

<ion-content>
    <div [formGroup]="myFormGroup">
        <ion-item>
            <ion-label>Record number</ion-label>
            <ion-input formControlName="record" [(ngModel)]="caseProvider.record"></ion-input>
        </ion-item>

        <button ion-button block (click)="saveCase()">
            <span>Save</span>
        </button>

    </div>
</ion-content>
  `
})
export class MyPage {

  myFormGroup: FormGroup;

  constructor(public formBuilder: FormBuilder, public caseProvider:CaseProvider) {
    this.myFormGroup = formBuilder.group({
        record: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('.*[0-9].*')])]
    });
  }
  saveCase(){
   //save code here
  }
}

如何将数据绑定到提供者（其中包含 getter 和 setter），并同时使用 formGroup 进行验证？

谢谢！

Answer 1

您不需要使用ngModel，因为您使用的是反应式表单，因此您将值存储在表单控件中，并且在提交时您可以传递表单创建的完整对象并使用这些值。

所以删除 ngModel，当你提交表单时，你的值整齐地放在一个对象中，在你的情况下它看起来像这样：

{
  record: 'whatever data'
}

因此，当您提交时，请在 saveCase 方法中传递表单值：

(click)="saveCase(myFormGroup.value)"

您最终将获得表单中的所有值。

Demo

在你的情况下，如果你想直接访问这个表单控件，你可以使用：

console.log(this.myFormGroup.controls.record.value);

您可以使用valueChanges 订阅表单更改，如下所示：

this.myFormGroup.valueChanges.subscribe(data => {
  console.log(data); // here is whole object
})

---

更新：

如果您的caseProvider 有一个接口（或类），您可以构建表单以使其与您的模型相匹配。所以在这种情况下，如果你的界面看起来像这样：

export interface CaseProvider {
  record: string
}

并在您的 TS 文件中声明该变量：

caseProvider: CaseProvider;

由于您已经构建了表单，因此您从表单中获取的对象与您的界面相匹配，您可以直接在 valueChanges 中分配值，因为您说您需要不断更新它：

this.myFormGroup.valueChanges.subscribe(data => {
  this.caseProvider = data;
})

Answer 2

我找到了更多关于 Angular 表单 (https://angular.io/docs/ts/latest/guide/forms.html) 而不是 Ionic 的文档（因为 Ionic 2 使用 Angular，但 Ionic 在这里缺少一些文档），并最终得到了以下解决方案，它允许同时使用 ngModel 和表单验证：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CaseProvider } from '../../providers/caseProvider';

@Component({
  selector: 'page-form',
  template: `
<ion-header>
</ion-header>

<ion-content>
    <form #caseForm="ngForm" (ngSubmit)="saveCase(caseForm)">
        <ion-item>
            <ion-label>Record number</ion-label>
            <ion-input #record="ngModel" [(ngModel)]="caseProvider.record" maxlength="30" pattern=".*[0-9].*"></ion-input>
        </ion-item>
        <ion-item [hidden]="record.valid || record.pristine">
            Please enter a valid record number.
        </ion-item>

        <button type="submit" ion-button block [disabled]="!caseForm.form.valid">
             <span>Save</span>
        </button>

    </form>
</ion-content>
  `
})
export class Page2 {

  constructor(public formBuilder: FormBuilder, public caseProvider:CaseProvider) {

  }
  saveCase(form){
      if(form.valid){
        //save code here
      }{
        console.log('form is not valid');
      }
  }
}