Question

这是我想要实现的，我想获得标签字符串作为我的formControl值，但我也需要选择更改的事件，这是我需要更改时的值，这是我的代码：

HTML：

<form [formGroup]="form">
    <select class="form-control" [(ngModel)]="selectedListKota" #t (change)="ZonaChanged(t.value)" formControlName="nama_zona">
                                <option *ngFor="let lz of listKota" [value]="lz.value">  
                                {{lz.label}}
                                </option>
    </select>
</form>

这是我的app.component.ts：

      constructor(private frmInputMasterBassService: FrmInputMasterBassService, private formBuilder: FormBuilder) {

        this.sStorage = sessionStorage.getItem('mAuth');
        this.sStorage = JSON.parse(this.sStorage);

        this.frmInputMasterBassService.getKotaList().subscribe(
          data => {
            this.data = data.json();
            for (var i = 0; i < this.data.length; i++) {
                this.listKota.push({label:this.data[i].KOTA, value:this.data[i].PROVINSI});
            }

            this.selectedListKota = this.listKota[0].value;
          },
          err => {
            console.log(err);
              }
          }
        );

        this.form= this.formBuilder.group({
          nama_bass: ['', Validators.nullValidator],
          alamat_bass: ['', Validators.nullValidator],
          nomor_telepon: ['', Validators.nullValidator],
          nama_zona: ['', Validators.nullValidator],
          contact_person: ['', Validators.nullValidator],
          email: ['', Validators.nullValidator]
        })

      }

  ZonaChanged(value){
    console.log(value);
    this.zona = value;
  }

这是我的listKota数组JSON看起来像：

  [{
    "label": "AGAM",
    "value": "Sumatera Barat"
  },
  {
    "label": "AIR MOLEK",
    "value": "Riau"
  }]

当我想选择AGAM时，我的表格JSON将如下所示：

{
  "nama_bass": "",
  "alamat_bass": "",
  "nomor_telepon": "",
  "nama_zona": "Sumatera Barat",
  "contact_person": "",
  "email": ""
}

＆＃34; nama_zona＆＃34;我想指的是AGAM，而不是＆＃34; Sumatera Barat＆＃34;当事件（已更改）触发时，如何在没有更改值的情况下更改此值

Answer 1

我能想到的最佳解决方案：我可能会在表单中设置[value]="lz.label"，以便您在表单中获得所需的值。

然后在更改事件中，您将传递标签并在数组中找到具有相同标签的对象。

顺便说一句，如果你不需要其他东西，就不需要在这里使用ngModel。所以我建议你这样做：

<form [formGroup]="form">
  <select class="form-control" #t (change)="ZonaChanged(t.value)" formControlName="nama_zona">
    <option *ngFor="let lz of listKota" [value]="lz.label">  
      {{lz.label}}
    </option>
  </select>
</form>

和ZonaChanged - 方法：

ZonaChanged(label){
  this.zona = this.listKota.find(x => x.label == label)
  // this.zona = this.zona.value;
}

Demo

现在在zona你有完整的对象，你可以使用它。

如何在dropdown angular2中将标签字符串作为formControl值？

1 个答案:

Demo