标签: ion-select

我有一个模板表单,模板标记中包含以下代码

  <form [formGroup]="modalFG">
  ...
  <ion-item *ngIf="isChangeStatus()">
      <ion-select formControlName="jobStatus"
                  (ionChange)="jobStatusChangeHandler($event)">
        <ion-option value=4>Success</ion-option> 
        <ion-option value=5>Failure</ion-option>
        <ion-option value=6>Terminated</ion-option> 
        <ion-option value=8>Inactive</ion-option> 
      </ion-select>
  </ion-item>
  </form>

在Typescript中我已经指定了一个值,但是我无法通过这个错误.

错误:必须为名称为'jobStatus'的表单控件提供值.

有人能告诉我我做错了什么吗？

...
private modalFG:FormGroup;
private jobStatus:number;
constructor(
  private navParams:NavParams,
  private view:ViewController,
  private fb: FormBuilder,
  ...
) {
    this.changeStatus = false;
    this.modalFG = fb.group({
      comment: ['', Validators.required],
      jobStatus: this.jobStatus
    });
}
private ionViewWillLoad():void {
    const data = this.navParams.get('data');
    this.modalFG.setValue({'jobStatus': this.jobStatus});
}

private jobStatusChangeHandler(ev:any) {
    console.log(ev);
}

private isChangeStatus():boolean {
    return this.changeStatus;
}

我也有提交的按钮处理程序:

this.exitData.jobStatus = this.modalFG.get('jobStatus').value;
this.view.dismiss(this.exitData);

这是完整的错误消息:

Error: …

我不知道你是否明白。我想要做的是有一个带有选项的离子选择，当用户选择例如“阿尔巴尼亚（+355）”并按确定按钮时，选择中只会显示“+355”而不是“阿尔巴尼亚（ +355)"

添加联系人.html

      <ion-select [(ngModel)]="selected_value" (ionChange)="getCountry(selected_value)" placeholder="País">
        <ion-option [value]="countries" *ngFor="let countries of country">
          {{countries.country_name}} ({{countries.dialling_code}})
        </ion-option>
      </ion-select>

添加联系人.ts

country = [{ "country_code": "AL", "country_name": "Albania","dialling_code": "+355" },
           { "country_code": "DZ", "country_name": "Algeria", "dialling_code":"+213" }];

这就是我所拥有的： 名称代码显示

这就是我尝试显示的内容：only-code-displayed

我用于ion-select选择一个选项，我想更改 的文本颜色ion-option。我的代码如下...

<ion-item>
    <ion-select interface="popover" [(ngModel)]="selectedGrp" (ionChange)="changeGrp()">  
        <ion-option value="" selected disabled>Select</ion-option>
        <ion-option *ngFor="let item of List;let i = index" [value]="item">{{item.name}} </ion-option>
    </ion-select>
</ion-item>

没有 SASS 变量来执行此操作。我尝试过使用 css 和样式，但它不起作用。谁能帮我改变ion-option文字颜色？

我想提供一个选项，允许用户ion-select在选择后决定不选择某个选项时清除表单字段，但我很难找到任何可以提供帮助的内容。

<ion-item class="formField ionField">
        <ion-label color="primary" stacked>PROJECT</ion-label>
        <ion-select
          #projectName
          ngModel
          name="project"
          interface="action-sheet">
          <ion-option (ionSelect)="projectSelect(project.ProjectName,i)" [value]={ID:project.ID,Name:project.ProjectName} *ngFor="let project of projectArray; let i = index" >{{project.ProjectName}}</ion-option>
        </ion-select>
      </ion-item>

<ion-option (ionChange)="resetValue()">Reset</ion-option>

任何帮助表示赞赏。

我正在使用ionic 4.7.0.

我报告的问题发生在 Chrome 和 Firefox 上。

实际行为：

使用ion-select带有选项的大名单，当您打开警报，ion-select不会自动滚动到选定的值。用户看到选项列表中的第一个值，他可能认为没有选择任何内容

预期行为：

当警报打开时，视图会自动以所选值为中心

我创建了这个stackblitz来突出显示行为，我们可以在 stackblitz 上看到在加载视图时，选定的值是11:00但是当您打开警报（通过单击 ion-select）时，我希望视图会自动滚动选定的值。

这是离子选择的预期行为吗？

我发现了一些关于同一主题的问题，但没有什么能真正回答这个问题：

• Ion-select 在 Ionic 3 中不滚动：这个给出了一个 CSS 的解决方案，它不能与 ionic 4 一起使用，因为 ionic 4 使用了不可修改的 web 组件

• 离子选择不显示 FormBuilder (Ionic 3) 的选定选项：同上

• https://github.com/ionic-team/ionic-v3/issues/1005：一些带有 ion-select 的滚动错误，应该用 ionic 3.9.5 修复，所以我想这不是同一个问题

我正在使用<ion-select>下拉列表，它按预期工作，但我在这里想要的是所选选项的索引<ion-select>

我已经使用<ion-select>并更改了事件，如下所示：

<ion-select class="myCustomSelect" [(ngModel)]="selectedProductDD" interface="popover" (ionChange)="onSelectChange($event)">
    <ion-option *ngFor="let selectedProduct of productArray" [value] = selectedProduct.pid>{{ selectedProduct.pid }} </ion-option>
</ion-select>

更改事件：

onSelectChange(selectedValue: any) {
   //Here I want Index also.
   //Currently I am getting selected Value.
}

让我知道是否有人可以帮助我！

提前致谢。

我的表单中的离子选择不显示其离子选项的全文