Angular表单中为嵌套对象的mat-select设置默认值

Problem Statement #

I have these nested data models:

export interface Model { 
  someField1:string; 
  someField2:string; 
  someObject: Object; 
}
export interface Object { 
  someField1: string; 
  someField2: string; 
  someField3: string; 
}

I built the form like this:

formBuilder.group({
  someField1: null,
  someField2: null,
  someObject: formBuilder.group({
    someField1: null,
    someField2: null,
    someField3: null
  })
})

And the component template:

<mat-form-field>
  <mat-select placeholder="Some Object" formGroupName="someObject">
    <mat-option *ngFor="let object of someObjectes" [value]="object">
      {{ object.someField1 }}
    </mat-option>
  </mat-select>
</mat-form-field>

I fetch a list of objects from the server for users to select, need to bind the selection to the form, and when the received model already has object data, that object should be preselected. How to implement this?

Solution #

Let's break this down into actionable steps, fixing a couple of common pitfalls along the way:

1. Fix the Form Structure (Critical!)

Your current form setup uses a FormGroup for someObject, but since you're selecting the entire object (not editing its individual fields), you should treat someObject as a single FormControl instead. This aligns with how mat-select works—it binds to a single control value (the selected object).

Update your form initialization code:

// Assume we've fetched data from the server first:
// this.model = fetchedModelFromServer;
// this.someObjectes = fetchedObjectListFromServer;

this.myForm = this.formBuilder.group({
  someField1: [this.model.someField1], // Prepopulate with existing model data
  someField2: [this.model.someField2],
  someObject: [this.model.someObject] // Bind the entire object as the control value
});

2. Fix the Template Binding

Replace formGroupName="someObject" with formControlName="someObject" in your mat-select—since it's now a single control, not a group:

<mat-form-field>
  <mat-select 
    placeholder="Some Object" 
    formControlName="someObject"
    [compareWith]="compareObjects" <!-- We'll add this next -->
  >
    <mat-option *ngFor="let object of someObjectes" [value]="object">
      {{ object.someField1 }}
    </mat-option>
  </mat-select>
</mat-form-field>

3. Handle Object Reference Mismatches with compareWith

Angular's mat-select uses object reference equality by default. If the someObject from your model isn't the exact same reference as one of the objects in someObjectes (which is common when fetching from a server), the preselection won't work.

Fix this by defining a compareWith function in your component to tell Angular how to identify matching objects. Use a unique field from your Object interface (like someField1, or an id if you have one):

// In your component class
compareObjects(obj1: Object, obj2: Object): boolean {
  // Handle null/undefined cases first
  if (!obj1 || !obj2) return obj1 === obj2;
  // Use your unique identifier field here
  return obj1.someField1 === obj2.someField1;
}

4. Ensure Data Load Order

Always initialize your form after you've fetched both the model and someObjectes from the server. If you use RxJS, you can combine the two requests with forkJoin to guarantee both datasets are ready:

import { forkJoin } from 'rxjs';
// ...

constructor(private formBuilder: FormBuilder, private apiService: YourApiService) {}

ngOnInit(): void {
  forkJoin([
    this.apiService.getModel(), // Fetch existing model data
    this.apiService.getObjectList() // Fetch available objects for selection
  ]).subscribe(([fetchedModel, fetchedObjectList]) => {
    this.model = fetchedModel;
    this.someObjectes = fetchedObjectList;
    // Now initialize the form with the loaded data
    this.initForm();
  });
}

private initForm(): void {
  this.myForm = this.formBuilder.group({
    someField1: [this.model.someField1],
    someField2: [this.model.someField2],
    someObject: [this.model.someObject]
  });
}

Key Takeaways #

• Use a FormControl (not FormGroup) for the selected object since you're choosing the entire entity.
• compareWith is essential when dealing with server-fetched objects to bypass reference equality checks.
• Always wait for all required data to load before initializing the form to ensure preselection works as expected.

内容的提问来源于stack exchange，提问作者Дима Гуманов