Angular - как отобразить текст / строку / тип даты на основе выпадающего списка выбора циновки - PullRequest
Новая
       62

Angular - как отобразить текст / строку / тип даты на основе выпадающего списка выбора циновки

3 голосов
/ 02 марта 2020

На основе Mat-select выбранное значение (текст / число / дата) должен отображаться тип текстового поля и соответствующий элемент. Вот мой код, но в этом коде я показываю все.

Например, если пользователь, выбирающий раскрывающееся меню в качестве даты, должен показывать не строку / число, наоборот, для других ..... 

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

Пожалуйста, дайте мне знать, как достичь это

1 Ответ

3 голосов
/ 03 марта 2020

Вы можете достичь этого очень простым способом, используя условные ngIf и #selector. Пожалуйста, обратите внимание, что другие поля mat-form продолжаются таким же образом ... вот ваш код 

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