首页 > 解决方案 > 如果其他输入控件设置了某个值,我想验证输入标签是否有值

问题描述

正如我在标题中所说,我有一个包含 2 个值的下拉列表 - 是和否,以及另一个可以自由书写的输入标签。我想验证如果用户选择“是”,输入标签也会被填充,反之亦然 - 如果选择“否”,我想确保输入标签为空。

为了确保如果选择“否”标签将为空,我尝试在选择“否”时简单地阻止标签,但这还不够,因为用户可以选择“是”然后写一些东西并切换回“否” "

<div class="select-wrapper" [ngClass]="{'select-wrapper-blocked': isNotAdmin()}">
            <select class="input-control" [(ngModel)]="booleanVariable">
                <option value="false">No</option>
                <option value="true">Yes</option>
            </select>
        </div>
    </div>

    <div class="col form-input" [ngClass]="{'form-input-blocked': isNotAdmin()}">
        <p class="input-label">
            Some text
        </p>
        <input class="input-control" [(ngModel)]="stringVariable" />
    </div>

标签: javascripthtmlangular

解决方案


您可以将输入标签包装在 a 中<span>并仅在用户选择“是”时显示它,booleanVariabletrue

试试这样:

<p class="input-label">
    <span *ngIf="booleanVariable">  Some text </span>
</p>

推荐阅读