I have a form with two date pickers like this:
<div fxLayout="row wrap" fxLayoutGap="10px">
<mat-form-field appearance="outline" fxFlex>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline" fxFlex>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker2">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
</div>
I would like to add a mat-select component that I created to be re-used like this:
<div fxLayout="row" fxLayoutGap="10px">
<custom-select [formGroup]="formGroup"></custom-select> //---Custom Field
<mat-form-field appearance="outline" fxFlex>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline" fxFlex>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker2">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
</div>
When I do this my custom component doesn't look like it follows the flex rules of the form. I tried to add fxFlex to the the form component like this:
<custom-select fxFlex [formGroup]="formGroup"></custom-select>
And it fits on the screen better but if you shrink the screen size the field gets so small you can't even read the mat-label or anything. It doesn't jump to the previous row like others do.
My custom mat select looks like this:
<div [formGroup]="formGroup" fxFlex>
<mat-form-field appearance="outline" fxFlex>
<mat-label>Location</mat-label>
<mat-select>
<mat-option>....</mat-option>
</mat-select>
</mat-form-field>
</div>