Tengo una forma iónica simple:
<ion-header> <ion-navbar> <ion-title>Foo</ion-title> </ion-navbar> </ion-header> <ion-content padding> <form [formGroup]="fooForm"> <ion-item> <ion-label floating>Name</ion-label> <ion-input formControlName="name" type="text"></ion-input> </ion-item> </form> <button ion-button full color="primary" (click)="save()">Save</button> </ion-content>y un componente de página:
import { Component } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ selector: 'fo-page-foo', templateUrl: './foo.html' }) export class FooPage { fooForm: FormGroup; constructor(public formBuilder: FormBuilder) { } ngOnInit() { this.fooForm = this.formBuilder.group({ name: [''] }); } public save() { console.log(this.fooForm.value); } }y una prueba:
import { FooPage } from './foo'; import { TestBed, ComponentFixture } from '@angular/core/testing'; import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { Form } from 'ionic-angular'; describe('Foo Page:', () => { let comp: FooPage; let fixture: ComponentFixture<FooPage>; let de: DebugElement; beforeEach(() => { TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], declarations: [FooPage], providers: [Form], imports: [FormsModule, ReactiveFormsModule], }); fixture = TestBed.createComponent(FooPage); fixture.detectChanges(); comp = fixture.componentInstance; de = fixture.debugElement; comp.ngOnInit(); }); describe('.constructor()', () => { it('Should be defined', () => { expect(comp).toBeDefined(); }); }); }); la estructura del proyecto y la prueba se basa en https://github.com/marcoturi/ionic-boilerplate . La prueba falla debido a un error: No value accessor for form control .
Estaba probando varios enfoques, pero parece que la combinación de las especificaciones de Ionic y el reciente Angular 4 hace que sea necesario agregar alguna configuración adicional y algunas de las soluciones existentes ya no son válidas debido a los cambios en Angular.
Encontré este problema hace dos días y gracias a aislarlo para publicarlo en SO pude llegar a la base de la solución en una pregunta ligeramente similar
El punto principal es agregar IonicModule a imports pero esto desencadena un montón de otras importaciones de Ionic:
import { App, Platform, Config, Keyboard, Form, IonicModule, DomController } from 'ionic-angular'; import { mockConfig, mockDomController, MockPlatform, mockPlatform } from 'ionic-angular/util/mock-providers'; y tan actualizado beforeEach debe comenzar con
TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], declarations: [FooPage], providers: [ App, Form, Keyboard, { provide: Platform, useClass: MockPlatform }, { provide: DomController, useValue: mockDomController(mockPlatform()) }, { provide: Config, useValue: mockConfig() }, ], imports: [ FormsModule, IonicModule, ReactiveFormsModule ], });PR con el ejemplo anterior ya se fusionó con https://github.com/marcoturi/ionic-boilerplate .