How to separate <MatDialogAction> from <Editform> in <MatDialog>

[ttanduong]

Describe the question Hi everyone. I found that the MatDialog element has the following struct:

<MatDialog>
    <MatDialogTitle>    
    </MatDialogTitle>
    <MatDialogContent>    
    </MatDialogContent>
    <MatDialogActions>    
    </MatDialogActions>
</MatDialog>

In my project, I want to use MatDialog to create a dialog for registering a new account. And I also use the model validation to validate the user input. So, I must put my both MatDialogContent (contains MatTextFields) and MatDialogActions (contains submit button) inside the Ediform element for validation as the following struct:

<MatDialog>
    <MatDialogTitle>    
    </MatDialogTitle>
    <EditForm>
        <DataAnnotationsValidator />
        <MatDialogContent>    
        </MatDialogContent>
        <MatDialogActions>    
        </MatDialogActions>
    </EditForm>
</MatDialog>

Then an problem occurred in my dialog: My dialog title and button are inside the vertical scrollbar (attached images).

Blazorfiddle link N/A

Expected behavior Please advise me how to use Editform in MatDialog that make dialog title and button locate outside the vertical scrollbar. Thanks very much.

Screenshots

Additional context N/A

[ttanduong]

I have found a solution for separate buttons from scrollbar: https://stackoverflow.com/questions/55975262/how-to-place-submit-button-for-a-blazor-editform-outside-of-the-component/55976005#55976005