Component doesn't render in Angular v17 w/ Angular Material v16

[toastyghost]

A little background info: We're running this combination of versions because the upgrade to Material UI 5 would require a significant refactor, but it is officially supported according to the Angular migration tool. The versions are 17.1.0 for your package (this is the one that allowed peer deps to resolve), 16.2.14 for Angular Material, and 17.3.12 for the other Angular packages.

I got a minimal example working with the same combination of dependency versions, but even pasting the exact markup, methods, etc., from that into our app code, it still renders as shown in the screenshot. The interior HTML also isn't present when I inspect.

It is inside of a mat-dialog component, if that makes a difference.

How it's supposed to look:

How it looks with the updated dependencies:

[pIvan]

Hi @toastyghost, could you provide any errors from the web browser console, if there are any? Also, if possible, could you share a test scenario?

[clayman1325]

Hello @pIvan Thanks for taking a look to this issue let me share with you the actual error in the chrome dev tools:

hook.js:608 ERROR RuntimeError: NG01203: No value accessor for form control name: 'files'. Find more at https://angular.io/errors/NG01203 at _throwMissingValueAccessorError (forms.mjs:3174:11) at setUpControl (forms.mjs:2947:13) at NgModel._setUpStandalone (forms.mjs:4046:9) at NgModel._setUpControl (forms.mjs:4034:37) at NgModel.ngOnChanges (forms.mjs:3993:18) at NgModel.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:4101:14) at callHookInternal (core.mjs:5136:14) at callHook (core.mjs:5167:9) at callHooks (core.mjs:5118:17) at executeInitAndCheckHooks (core.mjs:5068:9)

from a component that upone a click in an upload button renders plus cosmetics here and there:

`<file-upload
  class="file-uploader"
  [(ngModel)]="uploadedFiles"
  name="files"
  animation="false"
  accept="text/csv"
  (change)="checkType($event)"
  (drop)="checkDrop($event)"
  (click)="handlerClick()"
>
    <ng-template #placeholder>
        >{{ someText }}</span>
    </ng-template>
</file-upload>`

Thanks in advance for any help!!

[pIvan]

Can you provide more information? Is the mat-dialog component marked as standalone? Does it include all necessary imports, such as FileUploadModule or just FileUploadComponent?

I've created a simple example. Please let me know if it differs significantly from your code example. My example works until I remove either FileUploadModule or FileUploadComponent from the component's imports. Then I encounter the same error you described.

Here's a working example:

@Component({
  selector: 'dialog-elements-example-dialog',
  template: '
    <h2 mat-dialog-title>Dialog with elements</h2>
    <mat-dialog-content>
      <file-upload
        class="file-uploader"
        [(ngModel)]="uploadedFiles"
        name="files"
        animation="false"
        accept="text/csv"
        (change)="checkType($event)"
        (drop)="checkDrop($event)"
        (click)="handlerClick()"
      >
        <ng-template #placeholder> some text </ng-template>
      </file-upload>
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button mat-dialog-close>Close</button>
    </mat-dialog-actions>
  ',
  standalone: true,
  imports: [
    MatDialogTitle,
    MatDialogContent,
    MatDialogActions,
    MatDialogClose,
    FileUploadComponent,
    FormsModule,
  ],
})
export class DialogElementsExampleDialog {
  public uploadedFiles = [];

  public checkType(event) {
  }

  public checkDrop(event) {
  }

  public handlerClick() {
  }
}