Angular 5编辑表单中如何从数据库回显选中下拉选项

Hey there! Let's figure out how to display the pre-selected options from your database in your Angular 5 edit form. I’ve worked through this exact scenario multiple times, so here’s a straightforward breakdown based on the two most common form approaches in Angular 5: template-driven forms (with ngModel) and reactive forms.

This is great for simpler forms where you want two-way data binding out of the box.

1. Fetch your data and set up component properties
   First, grab the selected value (either an ID or the full option object) and the full list of dropdown options from your database. In your component:

// your-component.component.ts
import { Component, OnInit } from '@angular/core';
import { YourDataService } from './your-data.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  // The selected option ID/object from the database
  selectedOption: number | any; 
  // Full list of dropdown options
  dropdownOptions: any[] = [];

  constructor(private dataService: YourDataService) {}

  ngOnInit(): void {
    // Fetch data from your database/service
    this.dataService.getEditFormData().subscribe(data => {
      // Assume your API returns the selected option ID and all available options
      this.selectedOption = data.selectedOptionId; 
      this.dropdownOptions = data.allDropdownOptions;
    });
  }
}

2. Bind to the template
   In your HTML template, use [(ngModel)] to bind the selected value. Match the option's value to the type of your selected data:

• If you’re using an ID (number/string):

<!-- your-component.component.html -->
<select [(ngModel)]="selectedOption" name="optionSelector">
  <option *ngFor="let option of dropdownOptions" [value]="option.id">{{option.label}}</option>
</select>

• If you’re binding the full option object (better for complex data):

<select [(ngModel)]="selectedOption" name="optionSelector">
  <option *ngFor="let option of dropdownOptions" [ngValue]="option">{{option.label}}</option>
</select>

Just make sure selectedOption in your component is the exact object from the dropdownOptions array (or has matching reference/structure).

Reactive forms are better for more complex forms, validation, and better control over form state.

1. Initialize the form and fetch data
   Set up your form group in the component, then patch the selected value once you get data from the database:

// your-component.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { YourDataService } from './your-data.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  editForm: FormGroup;
  dropdownOptions: any[] = [];

  constructor(
    private fb: FormBuilder,
    private dataService: YourDataService
  ) {
    // Initialize the form with an empty control
    this.editForm = this.fb.group({
      selectedOption: ['']
    });
  }

  ngOnInit(): void {
    this.dataService.getEditFormData().subscribe(data => {
      this.dropdownOptions = data.allDropdownOptions;
      // Patch the selected value into the form control
      this.editForm.patchValue({
        selectedOption: data.selectedOptionId // or the full object if using ngValue
      });
    });
  }
}

2. Bind the form control to the template
   Link the select element to your form control using formControlName:

<!-- your-component.component.html -->
<form [formGroup]="editForm">
  <select formControlName="selectedOption">
    <option *ngFor="let option of dropdownOptions" [value]="option.id">{{option.label}}</option>
  </select>
</form>

Again, use [ngValue] instead of [value] if you’re binding full objects.

• Match data types: Ensure the selected value’s type matches the option values (e.g., don’t mix numbers and strings for IDs—convert if needed).
• Wait for data to load: If your dropdown options load asynchronously, wrap the select in *ngIf="dropdownOptions" to ensure options exist before setting the selected value (prevents unexpected empty selections).
• Multi-select cases: If you’re using a multi-select dropdown (<select multiple>), bind to an array instead of a single value (e.g., selectedOptions: number[]), and patch the array into the form control.

内容的提问来源于stack exchange，提问作者user6579211