Ionic 4 Reactive Forms - ion-select not showing initial values on edit

1
votes

I have seen a few posts on this for older versions of ionic but no answers for ionic 4 and reactive forms...

I have a select for my 'gameForm':

<ion-select formControlName="team"  placeholder="Select a Team" ok-text="Okay" cancel-text="Dismiss">
        <ion-select-option size="12" *ngFor="let team of teams | async" [value]="team">
            {{ team.year }} - {{ team.name }} ({{ team.weeknight }}'s)
        </ion-select-option>
    </ion-select>

When I create a new game the select shows the placeholder, I can select the team and create the object, sweet! But when I go to edit that game object, the same form shows but the select has no value; I have to manually click the dropdown and re-select the team.

Older posts say to use [(ngModel)] but if I try and use [{ngModel}]="team" not only does it still not show, but I also receive a warning in the console that says:

"It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7."

Not sure what I am missing. All my other fields bind correctly using the formControlName. Is this an ionic bug?

4
angularionic-frameworkangular-reactive-formsionic4
If you want more complete assistance please paste your full form code and your component code dealing with the form. A nice example as illustration can be found here: blog.grossman.io/real-world-angular-reactive-forms – jcuypers

4 Answers

0
votes

The correct to work with reactive form fields in markup is to define a formControlName for every field. this name needs to match with the form definition in the component.

you could use setValue and PatchValue to initialize form Fields with a value.

make sure the value property of the select field is bound to the the correct value. I Looks like it is bound to the full object not a field.

0
votes

@jcuypers Thanks for confirming I was correct with the formControlName. I solved the issue. First I updated from ionic 4 beta 7 to the newest release of Ionic. then digging on their doc site it looks like you need to use the compareWith property when working with objects. I added the compareWith attribute and its function and things look good!

0
votes

You can use [selectedText]:

<ion-select [interface]="interface()" formControlName="salesman" okText="Seleccionar"
                    cancelText="Cancelar" placeholder="Seleccionar..."
                    [selectedText]="agentsForms.controls[i].get('salesman').value">
                    <ion-select-option [value]="s.displayName" *ngFor="let s of uSR.usersRoles$|async">
                      {{s.displayName}}
                    </ion-select-option>
                    <ion-select-option value="otro">Otro</ion-select-option>
                  </ion-select>
0
votes

If you are still struggling with this issue then all you need to do is;

Modify your TS file by making the API request for your options first in the ngOnInit function among others. In your case 'teams'.

The issue is that your 'teams' don't get loaded early enough. This is also the case with ionic 5, not just ionic 4.