Question

我想编辑填写的表单，但没有从下拉元素中获得值

  <ion-item style="background-color:transparent">
    <ion-label required class="label">Class
      <span>
        <b style="color:red">*</b>
      </span>
    </ion-label>
    <ion-select [selectOptions]="selectOptions1" value="{{class}}" placeholder="Select Class" formControlName="class">
      <ion-option *ngFor="let class of plannerDetail.course.class; let i = index" (ionSelect)="setClassIndex(i)" value="{{class.id}}">{{class.course_name}}</ion-option>
    </ion-select>
 </ion-item>

ts文件

placeForm: FormGroup;
class: AbstractControl;

constructor(){
this.placeForm.formBuilder.group({
placeId: [’’, Validators.required],
});
this.placeForm.get(‘class’).setValue(myArray.class);
}

Answer 1

您可以使用ngModel创建双向数据绑定，如下所示：

.html

<ion-select [(ngModel)]="myVar">...</ion-select>

.ts

myVar = 'optionValue';

它的基本作用是：

（ngModel）=“ myVar”：当用户更改选项时，它将保存到您的变量中
[ngModel] =“ myVar”：当您更改.ts文件中的值时，其值也会在模板中更改

因此您可以控制ion-select值以及您的用户。

Answer 2

您必须将ionSelect元素中的ionChange的方法更改为ion-select，并给它$event以便获得类值。在ts文件中创建一个函数，您可以在其中获取其值。

<ion-select placeholder="Select Class" formControlName="class" (ionChange)="setClassIndex($event)">
     <ion-option *ngFor="let class of plannerDetail.course.class;let i of index" [value]="class.id">{{class.course_name}}</ion-option>
    </ion-select>

ts文件

 placeForm: FormGroup;
     constructor(public navCtrl: NavController,
        public navParams: NavParams,
        private fb: FormBuilder) {
    this.placeForm = this.fb.group({  
          class: [``, Validators.required]
        });
    }
     setClassIndex($e) {
        this.profileForm.value.class = $e;
      }

希望这对您有帮助！

离子2

2 个答案: