Ionic 2与formGroup和ngModel形成验证问题-Java 学习之路

在我的离子2项目中，我试图在this walk-through之后实现似乎是一个简单的表单验证例程 .

在我的控制器的构造函数中，我像这样使用 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”>

在你的班上：

this.myGroup = new FormGroup（{
firstName：new FormControl（）
}）;

或者，如果您想避免注册此表单控件，请指明它在ngModelOptions中是独立的：

例：

正如错误消息所示，以及this StackOverflow thread我将 [ngModelOptions]="{standalone: true}" 添加到我的输入中，但它返回了另一条错误消息：

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

1 回答

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

零件：
```
private clientId: string;
```
模板：
```
<form>
    <input [(ngModel)]="clientId" required />
</form>
```
如果我得到了相同的事实，这将在幕后为 <form> 元素创建 FormGroup 实例，并为其中的每个输入创建 FormControl 实例 . 然后，required指令将在其上应用验证器并触发验证（例如，相应地应用ng-valid / invalid） .

使用此方法，您只需使用 clientId 即可获取值 .

使用模型驱动（或"reactive"）方法是使用 FormBuilder 定义表单"schema"或仅创建 FormGroup 和 FormControl 的实例...

它看起来像这样：

零件：
```
private form: FormGroup;

ngOnInit() {
    this.form = new FormGroup({
        clientId: new FormControl('', [Validators.required])
    });
}
```
模板：
```
<form [formGroup]="form">
    <input formControlName="clientId" />
</form>
```
在这种情况下，如果您希望整个表单's value, you' d访问 (this.)form.value ，在此示例中将返回如下对象：
```
{ clientId: "whatever" }
```
或者，如果您只想要内部控件的值，请 grab (this.)form.controls['clientId'].value .

希望我让事情更清晰，而不是更糟糕:)

EDIT: 使用后一种方法意味着您可以访问 FormControl 的 Observable 并执行一些有趣的操作，例如：
```
let debouncedInput$ = this.form.control['clientId'].valueChanges.debounceTime(1000);
```
回复于 2024-04-27T09:45:57+08:00

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

1 回答

相关问题