Beta10 on AngularJS 2 RC3 Forms

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)]="" placeholder="Name"></ion-input>
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'
Error: No value accessor for 'name'
    at new BaseException (
    at _throwError (
    at Object.setUpControl (
    at FormGroupDirective.addControl (
    at NgModel._addControl (
    at NgModel.ngOnChanges (
    at DebugAppView._View_ItemFormPage0.detectChangesInternal (ItemFormPage.template.js:480:48)
    at DebugAppView.AppView.detectChanges (
    at DebugAppView.detectChanges (
    at DebugAppView.AppView.detectViewChildrenChanges (
[object Object]

Changing the Ionic input to:

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

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

Any suggestions are welcomed.

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.

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.

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.

Also wasted days on this…

It looks like it is fixed in the tree.

1 Like

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

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”: [
“cordovaPlatforms”: []