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

我试图实施什么似乎是一个简单的形式验证例程this walk-through我的离子2项目。Ionic 2表单验证问题与formGroup和ngModel

在我的控制器的构造函数我用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指令登记表单控件。请尝试使用 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>

正如所建议的错误信息，以及this StackOverflow thread我说[ngModelOptions]="{standalone: true}"到我的输入，但它与其他错误消息回来：

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

来源

2017-03-08 Vahid

你为什么同时使用'formControlName'和'ngModel'？ – Amit

@Amit是否（formControlName）也做绑定？如果可以，请发表一个解释我如何访问绑定值的答案？ – Vahid

是的，我会:) – Amit

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

组件：

private clientId: string;

模板：

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

如果我得到了事实一起，这将幕后的CR为<form>元素提供了一个FormGroup实例，为其中的每个输入提供了一个FormControl实例。然后，所需的指令将对其应用验证程序并触发验证（例如相应地应用有效/无效）。

使用这种方法，您可以简单地使用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);

来源

2017-03-08 08:20:11 Amit

你已经明确地说明了一切。非常感谢。 – Vahid

增加了一个更多的编辑，在我看来这是让反应形式好得多的原因。 – Amit

我做了你所说的，但我现在得到这个错误：'没有值的访问器用于未指定名称属性的表单控件。任何机会，你也会知道这是什么？ – Vahid

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

回答

相关问题