Based on Mat-select selected value (text/Number/Date) text field type and relevant element have to be shown. Here is my code but in this code, I am showing all.
For example If user selecting drop down as date only date field has to show not string/ number vice versa for others.....
<form class="example-form">
<mat-form-field class="example-full-width">
<mat-label>Name of Assumption </mat-label>
<input matInput type="text" placeholder="Enter Assumption Name">
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-form-field>
<mat-label>Selected Assumption Type...</mat-label>
<mat-select formControl="dataType">
<mat-option value="Number">Number</mat-option>
<mat-option value="Text">Text</mat-option>
<mat-option value="Date">Date</mat-option>
</mat-select>
</mat-form-field>
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label>Contracted Value </mat-label>
<input matInput type="text" placeholder="Enter Assumption Value">
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label>Contracted Value </mat-label>
<input matInput type="number" placeholder="Enter Assumption Value">
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label>Contracted Value </mat-label>
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label>Description (Optional) </mat-label>
<textarea matInput></textarea>
</mat-form-field>
</form>
Please let me know how to achieve this
You can achieve it in a very simple way using ngIf conditional and #selector pls note other mat-form-fields continue in the same way... here is your code
<form class="example-form">
<mat-form-field class="example-full-width">
<mat-label>Name of Assumption </mat-label>
<input matInput type="text" placeholder="Enter Assumption Name">
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-form-field>
<mat-label>Selected Assumption Type...</mat-label>
<mat-select formControl="dataType" #selectVal>
<mat-option value="Number">Number</mat-option>
<mat-option value="Text">Text</mat-option>
<mat-option value="Date">Date</mat-option>
</mat-select>
</mat-form-field>
</mat-form-field>
<mat-form-field class="example-full-width" *ngIf="selectVal.value == 'Text'">
<mat-label>Contracted Value </mat-label>
<input matInput type="text" placeholder="Enter Assumption Value">
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label>Description (Optional) </mat-label>
<textarea matInput></textarea>
</mat-form-field>
</form>