Angular 角度-如何基于mat select下拉列表显示文本/字符串/日期类型

Angular 角度-如何基于mat select下拉列表显示文本/字符串/日期类型,angular,angular-material,angular8,angular-ui,Angular,Angular Material,Angular8,Angular Ui,根据Mat选择所选值(文本/数字/日期),必须显示文本字段类型和相关元素。这是我的代码,但在这段代码中,我显示了所有 比如说 如果用户选择下拉菜单作为仅日期字段,则日期字段必须不显示字符串/数字,反之亦然 <form class="example-form"> <mat-form-field class="example-full-width"> <mat-label>Name of

根据Mat选择所选值(文本/数字/日期),必须显示文本字段类型和相关元素。这是我的代码,但在这段代码中,我显示了所有

比如说 如果用户选择下拉菜单作为仅日期字段,则日期字段必须不显示字符串/数字,反之亦然

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

假设的名称
选定的假设类型。。。
数
正文
日期
合同价值
合同价值
合同价值
说明(可选)

请让我知道如何实现这一点

您可以使用ngIf条件和#选择器以非常简单的方式实现它。请注意,其他mat表单字段以相同的方式继续。。。 这是你的密码

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

假设的名称
选定的假设类型。。。
数
正文
日期
合同价值
说明(可选)

你能解释一下你想要什么吗?@NavruzbekNoraliev谢谢你根据下拉值回复,特定元素只需显示例如,如果用户选择仅日期必须显示非字符串/数字,如果用户选择字符串,特定字段必须不显示其他谢谢你的帮助我收到错误,因为无法读取未定义的属性“value”。我在此处收到值错误。您是否将#selectVal放入了select标记中?thaaanks()())(#selectVal放入select标记中)thaaanks()(