Ionic 4 Reactive Forms - 离子选择在编辑时不显示初始值答案

【问题标题】：Ionic 4 Reactive Forms - ion-select not showing initial values on editIonic 4 Reactive Forms - 离子选择在编辑时不显示初始值
【发布时间】：2019-08-04 12:51:24
【问题描述】：

我看过一些关于旧版本 ionic 的帖子，但没有关于 ionic 4 和反应形式的答案...

我的“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>

当我创建一个新游戏时，选择会显示占位符，我可以选择团队并创建对象，甜美！但是当我去编辑那个游戏对象时，显示相同的表单但选择没有价值；我必须手动单击下拉列表并重新选择团队。

较早的帖子说要使用 [(ngModel)] 但如果我尝试使用 [{ngModel}]="team" 不仅它仍然不显示，而且我还在控制台中收到一条警告，上面写着：

“看起来您在与 formControlName 相同的表单字段上使用 ngModel。支持使用 ngModel 输入属性和 ngModelChange 事件 Angular v6 中已弃用反应形式指令并将被删除在 Angular v7 中。”

不知道我错过了什么。我的所有其他字段都使用 formControlName 正确绑定。这是离子虫吗？

【问题讨论】：

如果您需要更完整的帮助，请粘贴您的完整表单代码和处理表单的组件代码。一个很好的例子可以在这里找到：blog.grossman.io/real-world-angular-reactive-forms

标签： angular ionic-framework angular-reactive-forms ionic4

【解决方案1】：

在标记中使用响应式表单字段的正确方法是为每个字段定义一个formControlName。此名称需要与组件中的表单定义匹配。

您可以使用setValue 和PatchValue 来初始化表单字段的值。

确保选择字段的value 属性绑定到正确的值。我看起来它绑定到完整对象而不是字段。

【讨论】：

【解决方案2】：

@jcuypers 感谢您确认我的 formControlName 是正确的。我解决了这个问题。首先，我从 ionic 4 beta 7 更新到了 Ionic 的最新版本。然后在他们的文档站点上挖掘，看起来您在处理对象时需要使用 compareWith 属性。我添加了 compareWith 属性及其功能，看起来不错！

【讨论】：

【解决方案3】：

你可以使用[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>

【讨论】：

【解决方案4】：

如果你还在为这个问题苦苦挣扎，那么你需要做的就是；

通过首先在 ngOnInit 函数等中为您的选项发出 API 请求来修改您的 TS 文件。在您的情况下是“团队”。

问题是您的“团队”没有足够早地加载。 ionic 5 也是如此，而不仅仅是 ionic 4。

【讨论】：