Question

我已经看到了一些有关较旧版本的离子的文章，但没有离子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正确绑定。这是离子虫吗？

Answer 1

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

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

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

Answer 2

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

Answer 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反应式-离子选择在编辑时不显示初始值

3 个答案: