Question

我有一行包含单选按钮选择：

HTML：

<div class="form-row">
    <div class="col-md-3 mb-3">
        <div class = "form-group form-inline col-md-12 mb-3">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" formControlName = "flag"  value = "Y" (ngModelChange)="radioValueCheck(1)" >
                <label class="form-check-label">Yes</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" formControlName = "flag" value = "N" (ngModelChange)="radioValueCheck(2)" >
                <label class="form-check-label">No</label>
            </div>
        </div> 
    </div>
    <div class="col-md-9 mb-3">
        <div class="form-row">
            <div class="col-md-6 mb-3">
                <label> Date</label>
                <div class="input-group">
                    <input class="form-control" placeholder="mm/dd/yyyy" formControlName="date" ngbDatepicker #date="ngbDatepicker" [attr.disabled]="showInputFlg ? 'disabled' : null">
                    <div class="input-group-append">
                        <button class="btn btn-secondary" (click)="date.toggle()" type="button">
                            <i class="fa fa-calendar"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

TS：我有一个功能可以根据选择哪个单选按钮将其设置为true或false。

radioValueCheck(x) {
    if(x == 1){
      this.showInputFlg=true;
    }
    else{
      this.showInputFlg=false;
    }
    }

如何根据单选按钮的启用/禁用日期字段？

Answer 1

您可以在组件中创建一个变量，该变量可以链接到您的单选按钮输入：

public showDateInput = false;

radioValueCheck(x) {
    this.showDateInput = (x === 1);
}

然后在您的DOM中，您可以使用[disabled]：

<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" [checked]="showDateInput" id = "Y" (click)="radioValueCheck(1)">
    <label for="Y" class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" [checked]="!showDateInput" type="radio" id = "N" (click)="radioValueCheck(2)">
    <label for="N" class="form-check-label">No</label>
</div>

<input 
    class="form-control" 
    placeholder="mm/dd/yyyy"
    [disabled]="!showDateInput">

用于启用/禁用关联字段的单选按钮-角度6

1 个答案: