MAT-SELECTION-LIST与FormGroup绑定失效问题排查及解决

Hey, I've run into this exact scenario before—let's break down the issues and fixes step by step:

First: Fix the Obvious Typo #

Your initial code has a critical typo that's breaking the binding right off the bat: formControlname should be formControlName (note the capitalized N). This is a super common gotcha, and fixing it will make the basic example work as expected.

Here's the corrected template code:

<form [formGroup]="clientForm">
 <h1> FormGroup Value </h1>
 <pre> {{ clientForm.get('myOtherControl').value | json }} </pre>
 <mat-selection-list id='2' formControlName="myOtherControl">
 <mat-list-option value="SOMETHING3"> SOMETHING3 </mat-list-option>
 <mat-list-option value="SOMETHING4"> SOMETHING4 </mat-list-option>
 </mat-selection-list>
</form>

Second: Address Dialog-Specific Layout Interference #

If the typo fix didn't resolve your actual code issue (since you mentioned it was in a dialog), the problem likely stems from Flex layout placement. As you discovered, you shouldn't put fxLayout="row" on a div wrapping mat-list-option elements—move that attribute directly to the mat-selection-list tag instead.

The reason this breaks things is that nested Flex layout directives can interfere with the internal event listeners and value syncing logic of Mat-Selection-List, preventing the FormControl from picking up selection changes.

Adjusted structure for your dialog:

<form [formGroup]="clientForm">
  <mat-selection-list id='2' formControlName="myOtherControl" fxLayout="row">
    <!-- No wrapping div with fxLayout here -->
    <mat-list-option value="SOMETHING3"> SOMETHING3 </mat-list-option>
    <mat-list-option value="SOMETHING4"> SOMETHING4 </mat-list-option>
  </mat-selection-list>
</form>

Quick Debug Tips for Future Issues #

If you run into similar binding problems later, these tricks can help you diagnose fast:

• Add a valueChanges subscription to your FormControl to confirm if changes are being detected:

  this.clientForm.get('myOtherControl').valueChanges.subscribe(selectedValues => {
    console.log('Selected values updated:', selectedValues);
  });
  

• Check your browser's console for Angular form binding errors—Angular usually logs clear messages for issues like misspelled control names or invalid nesting.

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