2017-06-17 104 views
0

如何隱藏或顯示帶有可設置爲「真」或「假」的屬性的ng-bootstrapdatepicker-popup如何隱藏/顯示ng-bootstrap datepicker-popup?

我在窗體中使用以下窗體代碼片段。只有當用戶想要輸入出生日期(DOB)時,我纔想顯示整個div會話。通過單選按鈕決定是否設置DOB。

<div class="form-check"> 
    <label class="form-check-label" for="dobId"><input class="form-check-input" type="radio" formControlName="dob" value="dob" id="dobId" />Enter DOB</label> 
    <label class="form-check-label" for="nodobId"><input class="form-check-input" type="radio" formControlName="nodob" value="dob" id="nodobId" />Ignore DOB</label> 
</div> 

<div class="form-group row"> 
    <fieldset class="form-group col-6"> 
     <legend class="col-form-legend" for="dateOfBirthId">Date Of Birth</legend> 
     <ngbd-datepicker-popup id="dateOfBirthId"></ngbd-datepicker-popup> 
    </fieldset> 
</div> 

回答

1

使用其中一種形式技術(模板驅動或反應形式)來獲得您選擇的值。在Template Driven中,從@ angular/forms導入NgForm,並在視圖中使用表單標籤。你的單選按鈕應該有獨特的價值。使用* ngIf來檢查值,你可以顯示/隱藏日期選擇器。