CODEWITHSUNDEEP
angularionic2
BCMitch
BCMitch

Reputation: 33

ionic 2 beta 11 upgrade ngModel usage in forms break

I'm upgrading my ionic 2 project from beta 10 to 11 and fixing breaking things and came across a problem with my forms which I haven' been able to solve

My original code worked perfectly in beta 10 (albeit with deprecation warnings), example of form code:

<form [ngFormModel]="merchantForm" (ngSubmit)="onSubmit(merchantForm.value)">

    <ion-item>
        <ion-label>First name</ion-label>
        <ion-input [ngFormControl]="firstName" [(ngModel)]="merchantData.firstName" type="text"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label>Country</ion-label>
        <ion-select [ngFormControl]="country" [(ngModel)]="merchantData.country" (ngModelChange)="updateTimeZone()">
            <ion-option *ngFor="let key of countryList" [value]="key">{{key}}</ion-option>
        </ion-select>
    </ion-item>

    <ion-item>
        <ion-label>Time zone</ion-label>
        <ion-select [ngFormControl]="timezone" [(ngModel)]="merchantData.timezone">
            <ion-option *ngFor="let key of zoneList" [value]="key">{{key}}</ion-option>
        </ion-select>
    </ion-item>

</form>

I changed this code according to Angular 2 RC4 suggestions: (ngFormModel -> formGroup, ngFormControl -> formControl and then added a name to all ngModel input fields)

This returned an error:

ORIGINAL EXCEPTION: No value accessor for ''

When all [(ngModel)] tags are removed, it displays the form. This causes a different problem as I need to use data from 1 of the inputs before submitting the form.

Is there a way to use ngModel on one of the form elements while eliminating the no accessor error?

Upvotes: 1

Views: 136

Answers (1)

BCMitch
BCMitch

Reputation: 33

After further investigation it revealed that the fault was not originating from the presence of [(ngModel)]

There was a branching from an imported module [FORM_DIRECTIVES]. This module no longer handles ngModel calls - this has been deferred to a new module [REACTIVE_FORM_DIRECTIVEs] which has to be imported from '@angular/forms' and applied inside @Component like:

import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms';

and then applied:

@Component({
templateUrl: 'build/pages/sign-up/sign-up.html',
directives: [REACTIVE_FORM_DIRECTIVES],})

Upvotes: 1

Related Questions