以角度更新形式设置 Select 选项的默认值

Question

我正在处理更新任务，我有一个显示在数据表中的对象列表，我想使用模式执行更新过程，其中包含一个带有输入和选择选项的表单，当单击按钮显示表单时，输入采用我的对象的第一个属性，但问题是选择选项不采用默认值，这应该是对象的第二个属性！

<a data-toggle="modal" [attr.data-target]="'#modal-centered' + index"><i class="la la-pencil edit"
                      (click)="patchValue(rowData)"></i></a>
                  <div [attr.id]="'modal-centered' + index" class="modal fade">
                    <div class="modal-dialog modal-dialog-centered">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h4 class="modal-title">{{rowData.name}}</h4>
                          <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">×</span>
                            <span class="sr-only">Fermer</span>
                          </button>
                        </div>
                        <div class="modal-body">
                          <form [formGroup]="updateForm">
                            <div class="form-group">
                              <input type="text" formControlName="name" placeholder="Nom de la commission"
                                class="form-control">
                            </div>
                            <div class="form-group">
                              <select name="president" class="col-lg-6 custom-select form-control rounded"
                                formControlName="president">
                                <option [ngValue]="null" disabled>Choisir un Président</option>
                                <option [value]="president._id" *ngFor="let president of presidents">
                                  {{president.firstName}}
                                  {{president.lastName}}</option>
                              </select>
                            </div>
                          </form>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-primary" data-dismiss="modal"
                            (click)="updateCommission(rowData._id)">Sauvegarder</button>
                        </div>
                      </div>
                    </div>
                  </div>

---

import { Component, OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-commission',
  templateUrl: './commission.component.html',
  styleUrls: ['./commission.component.css']
})
export class CommissionComponent implements OnInit {
  commissions: any[];
  updateForm: FormGroup;

  presidents: any[];

  cols: any[];
  loading: boolean = true;

  constructor(
    private http: HttpClient
  ) {
    this.updateForm = new FormGroup({
      name: new FormControl(''),
      president: new FormControl('')
    });
  }

  ngOnInit() {

    this.http.get('/api/commissions').subscribe((commissions: any[]) => {
      this.loading = false
      this.commissions = commissions;
    })

    this.http.get('/api/users/byType/conseillerMunicipal').subscribe((presidents: any[]) => {
      this.presidents = presidents;
    })

    this.cols = [
      { field: 'name', header: 'Nom' },
      { field: 'presidentFullName', header: 'President' },
    ];
  }



  updateCommission(commissionID) {
    this.loading = true;
    this.http.put('/api/commissions/' + commissionID, this.updateForm.value).subscribe(updatedCommission => {
      this.loading = false;
      this.commissions.filter(commission => commission._id === commissionID)[0] = updatedCommission;
    })
  }


  patchValue(commission) {
    debugger
    this.updateForm.setValue({
      name: commission.name,
      president: commission.presidentFullName
    })
  }


}

这可以完成工作并在下拉列表中显示总统。但是，我还需要默认选择要更新的对象的总裁。

Answer 1

试试这个：

this.updateForm = new FormGroup({
  name: new FormControl(''),
  president: new FormControl(null)
});

根据您的条件内部模板，您将选项与null 进行比较。但是你的 formControl 的默认值是''。