Ionic 2/3: simultanously data binding to a provider, and using form validation

Question

I have some data bindings in my app, which bind to a provider, but now I'd like to add some form validation. The problem is I get an error when I start trying to use [(ngModel)] with the form validation.

The error message I get indicates:

ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive \"formControlName\" instead. Example:

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

If I make it standalone ( [ngModelOptions]=\"{standalone: true} ) then I start getting errors ( Template parse errors: Can't bind to 'ngModelOptions' since it isn't a known property of 'ion-input'. ), but outside of that it seems that the form validation probably wouldn't work either. On the other hand if if I remove the ngModel then the data is no longer bound to my provider.

Here is a very abreviated version of my code:

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

How do I get databinding to a provider (which has getters and setters in it), and do validation with a formGroup at the same time?

Thanks!

Answer 1

You do not need to use ngModel, since you are using a reactive form, so you have your values stored in the form controls, and upon submit you can pass the complete object created by the form and use the values.

So remove ngModel, when you submit form, you have the values neatly in an object, in your case it would look like this:

{
  record: 'whatever data'
}

So when you submit, pass the form value(s) in the saveCase method:

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

and you will end up with all the values you have in your form.

Demo

And in your case, if you'd want to access this form control directly you can use:

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

You can subscribe to the form changes using valueChanges like so:

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

---

UPDATE:

In case you have an interface (or class) for your caseProvider, you can structure the form so that it matches your model. So in this case if your interface would look like this:

export interface CaseProvider {
  record: string
}

and in your TS file you declare that variable:

caseProvider: CaseProvider;

since you have built your form so that the object you get from the form, matches your interface, you can assign the values directly in your valueChanges, since you said you need to constantly update it:

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

Answer 2

I found more documentation on Angular forms ( https://angular.io/docs/ts/latest/guide/forms.html ) instead of Ionic (since Ionic 2 uses Angular, but Ionic was lacking some documentation here), and ended up with the following solution that allow using both ngModel and form validation:

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');
      }
  }
}