[Solution] Ionic RC0, forms control and validation

[davorpeic]

Short description of the problem:

So I was following this great tutorial (http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html) from Pascal on how to build model driven forms using FormBuilder in latest RC0 as I was using it in Beta11, but soon I was stopped with this error

ORIGINAL EXCEPTION: No value accessor for form control with name: 'firstname'

I'm using (I think I'm) all by the book, and this is in short what I have in
app.module.ts

import { ReactiveFormsModule } from '@angular/forms';
...
@NgModule({  
  imports: [
      ReactiveFormsModule
]
...

login.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class LoginPage implements OnInit{
    registerForm:FormGroup;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
        this.registerForm = this.formBuilder.group({
            firstname: ['', Validators.required],
            lastname: ['', Validators.required]    
        });
    }
}

login.html

<form [formGroup]="registerForm">
        <label>Firstname:</label>
        <!-- This simple input works with validation -->
       <input type="text" [(ngModel)]="test" formControlName="firstname" style="border:solid 1px #000;">
        <!-- This input returns error: ORIGINAL EXCEPTION: No value accessor for form control with name: 'firstname' -->
        <ion-input [(ngModel)]="test" type="text" formControlName="firstname"> </ion-input>

        <label>Lastname:</label>
        <input type="text" formControlName="lastname" style="border:solid 1px #000;">
       <button type="submit">Submit</button>
    </form>
   <!-- Placed outside form on purpose -->
    <h2>{{registerForm.valid}}</h2>

SOLUTION

<!-- Add 'ngDefaultControl' directive to ion-input -->
 <ion-input [(ngModel)]="test" type="text" formControlName="firstname" ngDefaultControl> </ion-input>

What behavior are you expecting?

Use FormBuilder validations with custom form elements from Ionic

Steps to reproduce:

1. Use example markup posted above

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
http://stackoverflow.com/questions/38958347/angular2-rc-5-custom-input-no-value-accessor-for-form-control-with-unspecified
angular/angular#9230

Which Ionic Version? 1.x or 2.x
Ionic 2.x

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.11.1
Xcode version: Xcode 7.3.1 Build version 7D1014

[jgw96]

Hello, thanks for opening an issue with us! After reviewing I am going to close this issue as it seems to be an Angular bug and not an Ionic bug.

[babyjazz]

It works on browser testing, but it doesn't work when build or emulate

----------------------------------This is my error----------------------------------------------------

Error at C:/Users/babyjazz/chlom/.tmp/pages/contact/contact.ts:2:10: Duplicate identifier 'Component'.
Error at C:/Users/babyjazz/chlom/.tmp/pages/contact/contact.ngfactory.ts:440:41: Property 'test' does not exist on type 'ContactPage'.
Error at C:/Users/babyjazz/chlom/.tmp/pages/contact/contact.ngfactory.ts:456:41: Property 'test' does not exist on type 'ContactPage'.
Error at C:/Users/babyjazz/chlom/.tmp/pages/contact/contact.ngfactory.ts:643:43: Property 'test' does not exist on type 'ContactPage'.
Error at C:/Users/babyjazz/chlom/.tmp/pages/contact/contact.ngfactory.ts:658:43: Property 'test' does not exist on type 'ContactPage'.
at check (C:\Users\babyjazz\chlom\node_modules@angular\tsc-wrapped\src\tsc.js:31:15)
at Tsc.typeCheck (C:\Users\babyjazz\chlom\node_modules@angular\tsc-wrapped\src\tsc.js:86:9)
at C:\Users\babyjazz\chlom\node_modules@angular\tsc-wrapped\src\main.js:33:23
at process._tickCallback (internal/process/next_tick.js:103:7)
at Module.runMain (module.js:592:11)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3

[19:32:50] ngc: Compilation failed

[19:32:50] ngc failed: NGC encountered an error

[19:32:50] Error: NGC encountered an error
at ChildProcess. (C:\Users\babyjazz\chlom\node_modules@ionic\app-scripts\dist\ngc.js:62:24)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:191:7)
at ChildProcess.cp.emit (C:\Users\babyjazz\chlom\node_modules\cross-spawn\lib\enoent.js:40:29)
at maybeClose (internal/child_process.js:877:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)

Error running ionic app script "build": Error: NGC encountered an error

npm
ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v6.7.0
npm
ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ build: ionic-app-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@ build script 'ionic-app-scripts build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm
ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ionic-hello-world
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\babyjazz\chlom\npm-debug.log

Caught exception:
undefined

Mind letting us know? https://github.com/driftyco/ionic-cli/issues

[davorpeic]

Hey @babyjazz, I removed test variable from my example, it was giving you that error Property 'test' does not exist on type 'ContactPage'. please remove {{test}} from my example and it should build for device/emulator.

d