角度-如何根据垫子选择下拉菜单显示文本/字符串/日期类型

Question

根据Mat选择所选值(text/Number/Date(，必须显示文本字段类型和相关元素。这是我的代码，但在这个代码中，我显示了所有内容。

例如如果用户选择下拉列表作为仅日期字段，则其他字段必须不显示字符串/数字，反之亦然。。。。。

<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>

请让我知道如何实现这个

Answer 1

您可以使用ngIf conditional和#selector以一种非常简单的方式实现它，请注意其他表单字段也以相同的方式继续。。。这是你的代码

<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>