Beta10 on AngularJS 2 RC3 Forms

Ionic Framework ionic-v3
1

Hey there,

I remember reading a similar problem in here about issues with Beta 10 on Angular RC3 .
Trust me when I say I’ve tried a lot of ‘solutions’ and I’ve spent days on this issue, nothing works except using old plain Angular instead of Ionic flavour.

The reason for this ^ is because I’ve given up on a solution in Ionic. I’m going to wait for another release or better yet, a stable release of Ionic before.

I’m posting this for people with a similar issue and hopefully save someone else the headaches and lost time.

The problem arises when using the new Form module in RC3.

Given this code:

  <form [formGroup]="itemForm" (ngSubmit)="onSubmit()">
    <ion-input type="text" formControlName="name" [(ngModel)]="model.name" placeholder="Name"></ion-input>
  </form>

import {Component, ViewChild} from '@angular/core';
import {REACTIVE_FORM_DIRECTIVES, FormControl, FormGroup, FormArray, Validators} from '@angular/forms';

...

export class ItemFormPage {
  @ViewChild('itemFormSlider') itemFormSlider: Slides;

  itemForm: FormGroup;
  model: any;

  constructor( ) {
    this.model = {
      name: "test2",
      description: "trest",
      item_category_id: "5",
      location_id: "6",
      item_attributes: [{
        "3": { value: "£300" },
        "4": { material: "Cotton" },
        "5": { color: "green" }
      }]
    };

    this.itemForm = new FormGroup({

      name:             new FormControl(''),
      description:      new FormControl(''),
      item_category_id: new FormControl(''),
      location_id:      new FormControl(''),
      item_attributes:  new FormArray([ ])
    });

Gives the following error:

4     538151   group    EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in build/pages/item-form/item-form.html:17:27
ORIGINAL EXCEPTION: No value accessor for 'name'
ORIGINAL STACKTRACE:
Error: No value accessor for 'name'
    at new BaseException (http://192.168.0.46:8100/build/js/app.bundle.js:2576:23)
    at _throwError (http://192.168.0.46:8100/build/js/app.bundle.js:37625:11)
    at Object.setUpControl (http://192.168.0.46:8100/build/js/app.bundle.js:37600:9)
    at FormGroupDirective.addControl (http://192.168.0.46:8100/build/js/app.bundle.js:37168:18)
    at NgModel._addControl (http://192.168.0.46:8100/build/js/app.bundle.js:36692:65)
    at NgModel.ngOnChanges (http://192.168.0.46:8100/build/js/app.bundle.js:36651:18)
    at DebugAppView._View_ItemFormPage0.detectChangesInternal (ItemFormPage.template.js:480:48)
    at DebugAppView.AppView.detectChanges (http://192.168.0.46:8100/build/js/app.bundle.js:30729:14)
    at DebugAppView.detectChanges (http://192.168.0.46:8100/build/js/app.bundle.js:30834:44)
    at DebugAppView.AppView.detectViewChildrenChanges (http://192.168.0.46:8100/build/js/app.bundle.js:30755:19)
ERROR CONTEXT:
[object Object]

Changing the Ionic input to:

    <input type="text" formControlName="name" [(ngModel)]="model.name" placeholder="Name">

does the trick, I’m obviously not happy as I want to use Ionic’ helpers.

Any suggestions are welcomed.

2

Experiencing the same problem here when trying to implement the model-driven forms approach as explained in this tutorial.

Looks like ionic form elements don’t work with the formControlName directive, i’ve experienced it when trying to use ion-input and ion-textarea replacing both of these to the normal HTML markup works fine.

3

I raised this as a bug yesterday on the Ionic GitHub page and it looks like the team already knew about it and are working on a solution for beta 11.

4

Thanks for opening the issue. At least now I know it’s not just me or my code. Glad to see they’re working on this.

5

Also wasted days on this…

6

It looks like it is fixed in the tree.

7

You need to use regular input tags. Beta 10 has been released too soon. Still a branch on my project, too many bugs

8

Even I have the same problem, also in Beta 11. Here is my package.json.

{
“dependencies”: {
"@angular/common": “2.0.0-rc.4”,
"@angular/compiler": “2.0.0-rc.4”,
"@angular/core": “2.0.0-rc.4”,
"@angular/platform-browser": “2.0.0-rc.4”,
"@angular/platform-browser-dynamic": “2.0.0-rc.4”,
"@angular/http": “2.0.0-rc.4”,
"@angular/forms": “0.2.0”,
“es6-shim”: “0.35.1”,
“ionic-angular”: “2.0.0-beta.11”,
“ionic-native”: “1.3.10”,
“ionicons”: “3.0.0”,
“reflect-metadata”: “0.1.8”,
“rxjs”: “5.0.0-beta.6”,
“zone.js”: “0.6.12”
},
“devDependencies”: {
“del”: “2.2.0”,
“gulp”: “3.9.1”,
“gulp-watch”: “4.3.5”,
“ionic-gulp-browserify-typescript”: “2.0.0”,
“ionic-gulp-fonts-copy”: “^1.0.0”,
“ionic-gulp-html-copy”: “^1.0.0”,
“ionic-gulp-sass-build”: “^1.0.0”,
“ionic-gulp-scripts-copy”: “^2.0.0”,
“ionic-gulp-tslint”: “^1.0.0”,
“tslint-ionic-rules”: “0.0.4”,
“run-sequence”: “1.1.5”
},
“name”: “evivaalba2.1”,
“description”: “eVivaAlba2.1: An Ionic project”,
“cordovaPlugins”: [
“cordova-plugin-device”,
“cordova-plugin-console”,
“cordova-plugin-whitelist”,
“cordova-plugin-splashscreen”,
“cordova-plugin-statusbar”,
“ionic-plugin-keyboard”
],
“cordovaPlatforms”: []
}