Angular 18，mat-select 绑定不适用于 formControlName 属性

Question

Angular 自定义控制组件有以下代码

@Component({
  selector: 'material-custom-control',
  templateUrl: './material-custom-control.component.html',
  styleUrls: ['./material-custom-control.component.scss'],
  providers: [
    { provide: MatFormFieldControl, useExisting: RapportUiMaterialSelectComponent },
    { provide: ErrorStateMatcher, useClass: CustomErrorMatcher }
  ]
})

export class MaterialCustomControlComponent implements MatFormFieldControl<SelectList>, OnInit, OnDestroy, ControlValueAccessor {
  @Input() options: Array<{ key: string, value: string }>;
....

有html

<ng-container [formGroup]="form">    
    <mat-select 
    formControlName="selectedValue">
        <mat-option 
        *ngFor="let option of options" 
        [class.no-content]="!option.value"
        [value]="option.key">{{option.value}}</mat-option>
    </mat-select>
</ng-container>

在其他控件（如以下控件）中使用此自定义控件

  <material-custom-control formControlName="myName" [options]="myOptions">
  </material-custom-control>
  
    myOptions = [
    { key: '', value: '' },
    { key: 'Option1', value: 'Option1' },
    { key: 'Option2', value: 'Option2' },
    { key: 'Option3', value: 'Option3' },
  ];

在 UI 上，选择组件渲染时没有错误，但没有任何选项。 该代码在 Angular 11 中可以正常工作，但将应用程序更新到 Angular 18 后就无法正常工作。

如果我们删除属性 formControlName="selectedValue" 那么选项就会加载到 UI 上。

请提出可能是什么问题。

Answer 1

您在同一元素的两个地方使用了

formControlName

。使用输入参数作为将值传递给

options

的方式。

应该是这样的

<material-custom-control [formctrlName]="myName" [options]="myOptions">
  </material-custom-control>

为

formctrlName

创建输入参数并在

mat-select

中使用它