Angular含mat-select的自定义表单控件无法提交选中值，原因何在？

Hey there! Let's break down why your custom mat-select form control might be failing to pass selected values when submitting the form. These are the most common pitfalls I encounter with this exact setup:

• Missing or incomplete ControlValueAccessor implementation
  This is the backbone of any Angular custom form control. You must implement three core methods: writeValue, registerOnChange, and registerOnTouched. The biggest mistake here is forgetting to trigger the onChange callback when the mat-select's selection changes—without this, the parent form has no way of knowing the value updated.

• Missing NG_VALUE_ACCESSOR provider
  Angular’s form system won’t recognize your component as a form control unless you add the NG_VALUE_ACCESSOR provider to your component’s metadata. This tells Angular to use your component as the value accessor for form bindings.

• Conflicting two-way binding with ngModel
  Avoid using [(ngModel)] directly on the internal mat-select if you’re implementing ControlValueAccessor. Instead, bind to a private internal variable, update it on selection change, and trigger the onChange callback. Using ngModel here can create conflicting value updates between the component and the parent form.

• Not handling touch state
  If your form uses validation (like required fields), you need to call the onTouched callback when the mat-select loses focus. This marks the control as touched, which triggers validation messages on submission.

Example of a Working Minimal Implementation #

Here’s a stripped-down version of what your component should look like to fix these issues:

Component TypeScript:

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { MatSelectChange } from '@angular/material/select';

@Component({
  selector: 'app-custom-mat-select',
  templateUrl: './custom-mat-select.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomMatSelectComponent),
      multi: true
    }
  ]
})
export class CustomMatSelectComponent implements ControlValueAccessor {
  internalValue: any;
  options = [ /* Your option list here */ ];

  // Internal callbacks for form control integration
  private onChange: (value: any) => void = () => {};
  private onTouched: () => void = () => {};

  writeValue(value: any): void {
    this.internalValue = value;
  }

  registerOnChange(fn: (value: any) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
    // Add logic to disable the mat-select if needed
  }

  handleSelectionChange(event: MatSelectChange): void {
    this.internalValue = event.value;
    // Notify the parent form of the value change
    this.onChange(this.internalValue);
  }

  handleBlur(): void {
    // Mark the control as touched
    this.onTouched();
  }
}

Component Template:

<mat-select 
  [value]="internalValue"
  (selectionChange)="handleSelectionChange($event)"
  (blur)="handleBlur()"
>
  <mat-option *ngFor="let opt of options" [value]="opt.value">
    {{ opt.label }}
  </mat-option>
</mat-select>

If you’ve covered all these bases and still have issues, double-check that your option values match the type expected by the parent form (e.g., don’t pass objects if the form expects strings) and that the custom control is properly bound to the parent form using formControlName or [formControl].

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