J'ai vu quelques articles à ce sujet pour les anciennes versions d'ionic mais aucune réponse pour les formes ioniques 4 et réactives ...
J'ai une sélection pour mon '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>
3 Réponses :
Le bon travail avec les champs de formulaire réactifs dans le balisage est de définir un formControlName pour chaque champ. ce nom doit correspondre à la définition du formulaire dans le composant.
vous pouvez utiliser setValue et PatchValue pour initialiser les champs de formulaire avec une valeur.
assurez-vous que la propriété value du champ de sélection est liée à la valeur correcte. I On dirait qu'il est lié à l'objet complet et non à un champ.
@jcuypers Merci d'avoir confirmé que j'avais raison avec le formControlName. J'ai résolu le problème. J'ai d'abord mis à jour l'ionic 4 beta 7 vers la dernière version de Ionic. puis en creusant sur leur site de documentation, il semble que vous deviez utiliser la propriété compareWith lorsque vous travaillez avec des objets. J'ai ajouté l'attribut compareWith et sa fonction et les choses ont l'air bien!
Vous pouvez utiliser [sélectionnéText ]:
<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>
Si vous souhaitez une assistance plus complète, veuillez coller votre code de formulaire complet et votre code de composant traitant du formulaire. Un bel exemple d'illustration peut être trouvé ici: blog.grossman.io/real -monde-formes-angulaires-réactives