Angular

Question

基于 Mat-select selected 值 (text/Number/Date) 必须显示文本字段类型和相关元素。这是我的代码，但在此代码中，我显示了所有代码。

例如如果用户 selecting 下拉，因为只有日期日期字段必须显示而不是字符串/数字，反之亦然......

          <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 条件和 #selector 以一种非常简单的方式实现它，请注意其他 mat-form-fields 以相同的方式继续... 这是你的代码

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

Angular - 如何根据 mat select 下拉列表显示文本/字符串/日期类型

Angular - how to display text / String / Date type based on the mat select drop down

angular-ui

angular-material

angular8