双向绑定 FormGroup Select 与对象

Question

我有这样的反应形式

<form [formGroup]="altBirimFormu" (ngSubmit)="onSubmit()">

        <div formGroupName="detay" class="form-area">
          <h3>Detaylar</h3>
          <div class="row">
            <div class="col-md-1"><label>Birim</label></div>
            <div class="col-md-4">
              <div class="input-space">
                <select formControlName="birimControl" class="custom-select">
                  <option *ngFor="let birim of birimListesi" [ngValue] ="birim.id">
                  {{ birim.birimAdi }}</option>
                </select>
              </div>
            </div>

            <div class="col-md-2"><label>Alt Birim Adı</label></div>
            <div class="col-md-5">
              <div class="input-space">
                <input formControlName="altBirimAdi" type="text" class="form-control">
              </div>
            </div>

            <div class="col-md-2"><label>Açıklama</label></div>
            <div class="col-md-6">
              <div class="input-space">
                <textarea formControlName="aciklama" type="text" class="form-control" rows="2"></textarea>
              </div>
            </div>
            <div class="col-md-3">
              <div class="custom-control form-control-lg custom-checkbox">
                <input formControlName="aktif" type="checkbox" id="aktifMi" class="custom-control-input">
                <label for="aktifMi" class="custom-control-label">Aktif</label>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center">
          <button type="submit" class="btn btn-primary">Kayıt</button>
        </div>
      </form>

我的组件是这样的：

altBirimFormu: FormGroup;
  birimListesi: Birim[] = [];
  seciliAltBirim: AltBirim;

  constructor(private birimService: BirimService, private formBuilder: FormBuilder,
              private altBirimService: AltBirimService, private route: ActivatedRoute,
              private alertify: AlertifyService) {
  }

  ngOnInit(): void {
    this.formuBaslat();
    this.birimleriCek();
    this.altBirimiCek();
  }

  private formuBaslat() {
    this.altBirimFormu = this.formBuilder.group({
      degerler: this.formBuilder.group({
        maxSicaklik: new FormControl('', [Validators.required, Validators.maxLength(2)]),
        minSicaklik: new FormControl('', [Validators.required, Validators.maxLength(2)]),
        maxNem: new FormControl('', [Validators.required, Validators.maxLength(2)]),
        minNem: new FormControl('', [Validators.required, Validators.maxLength(2)])
      }),
      detay: this.formBuilder.group({
        birimControl: new FormControl(''),
        altBirimAdi: new FormControl('', [Validators.required, Validators.min(3)]),
        aciklama: new FormControl(''),
        aktif: new FormControl('')
      })
    });
  }

  private birimleriCek() {
    this.birimService.getBirimList().subscribe(
      data => {
        data.forEach(
          birim => this.birimListesi.push(birim)
        );
      }
    );
  }

  private altBirimiCek() {
    const hasBirimId: boolean = this.route.snapshot.paramMap.has('id');
    if (hasBirimId) {
      this.altBirimService.getAltBirimById(+this.route.snapshot.paramMap.get('id'))
        .subscribe(
          data => {
            this.seciliAltBirim = data;
            console.log(data.birim.id)
            this.formuYarat();
          }
        );
    }
  }

  private formuYarat() {
    this.altBirimFormu = this.formBuilder.group({          
      detay: this.formBuilder.group({
        birimControl: new FormControl(this.seciliAltBirim.birim),
        altBirimAdi: new FormControl(this.seciliAltBirim.altBirimAdi, [Validators.required, Validators.min(3)]),
        aciklama: new FormControl(this.seciliAltBirim.aciklama),
        aktif: new FormControl(this.seciliAltBirim.aktif)
      })
    });

  }

现在我想要的是获取有关 seciliAltBirim 的信息。

我可以使用 altBirimiCek() 和 formuYarat() 方法获取所有字段，包括 this.seciliAltBirim.altBirimAdi、this.seciliAltBirim.aktif 等。但是无法将 this.seciliAltBirim.birim 放入我的 select 框中.我尝试使用

<select formControlName="birimControl" class="custom-select">
                  <option *ngFor="let birim of birimListesi" [ngValue] ="birim">
                  {{ birim.birimAdi }}</option>
                </select>

当我提交表单时，我可以正确保存对象并且我可以在日志中看到 selected 对象。我只是无法在 select 框中显示此对象。

但是，如果我在 select 框中使用字符串值而不是对象，这次我可以在选项中显示 selected 对象，但无法保存它。

我想知道如何在不使用字符串值的情况下在 select 框中以两种方式绑定对象。

Answer 1

你必须使用angular提供的compareWith功能来选择哪一个被选中。

<ng-container [formGroup]="altBirimFormu"> <!-- Shall be removed -->
    <select formControlName="birimControl" [compareWith]="objectComparisonFunction">
      <option *ngFor="let birim of birimListesi" [value]="birim">
        {{ birim.birimAdi }}
      </option>
    </mat-select>
</ng-container>

// Into your component.ts file
objectComparisonFunction = function (option: Birim, value: Birim): boolean {
    return option?.id === value?.id
}

双向绑定 FormGroup Select 与对象

Two Way Binding FormGroup Select With Object

angular

spring-restcontroller

form-control

formgroups