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

Question

我想实现什么似乎是一个简单的表单验证程序以下这个步行通过我的离子2个项目.

在我的控制器的构造函数中,我使用FormBuilder这样的方法来创建一个formGroup:

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

然后在模板中我添加formControllerName了相关元素的属性,如下所示:

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

并将root元素绑定到'formGroup`,如下所示:

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

此操作失败,并显示以下错误消息:

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>

正如错误消息所示,以及此StackOverflow线程我添加[ngModelOptions]="{standalone: true}"到我的输入,但它返回另一个错误消息:

模板解析错误:无法绑定到'ngModelOptions',因为它不是'ion-select'的已知属性.

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的FormControl,并做一些有趣的事情,比如:

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