Question

我们如何根据单选按钮选择隐藏和显示元素？在第一个视图中，div 被隐藏，问题是当我选择 div 显示的任何单选按钮时，当我单击 no 时它永远不会再次隐藏。我想要实现的是，当我单击单选按钮值 true 时，div 将显示，当我单击单选按钮 false 时，div 应该被隐藏。

<div class="form-group col-md-6">
    <div class="d-flex mb-2">
        <div>Do you have massage certificate ?</div>
        <div class="form-check-radio m-0">
            <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            value="true" >
            Yes
            <span class="form-check-sign"></span>
            </label>
        </div>
        <div class="form-check-radio m-0">
            <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            value="false" >
            No
            <span class="form-check-sign"></span>
            </label>
        </div>
    </div>
    <div *ngIf="has_cert">
        <input type="file" class="form-control-file custom" id="cv">
    </div>
</div>

Answer 1

这里的问题是您将值设置为“true”和“false”作为字符串类型。所以，在 ngIf 中字符串不为空。因此，它总是被显示出来。使用如下绑定语法：

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<div class="form-group col-md-6">
  <div class="d-flex mb-2">
    <div>Do you have massage certificate ?</div>
    <div class="form-check-radio m-0">
      <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            [value]="true" >
            Yes
            <span class="form-check-sign"></span>
            </label>
    </div>
    <div class="form-check-radio m-0">
      <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            [value]="false" >
            No
            <span class="form-check-sign"></span>
            </label>
    </div>
  </div>
  <div *ngIf="has_cert">
    <input type="file" class="form-control-file custom" id="cv">
  </div>
</div>

Answer 2

首先，您应该维护该单选按钮值的状态。使用 console.log 进行检查

然后对其进行检查验证

如果没有任何反应，请尝试此方法，然后告诉我我会尝试另一种方法。

Answer 3

<form #myForm="ngForm" (submit)="submitForm(myForm)" novalidate>
  <div class="form-group col-md-6">
    <div class="d-flex mb-2">
      <div>Do you have massage certificate ?</div>
      <div class="form-check-radio m-0">
        <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            value="yes" 
            name="option" 
            ngModel 
            >
            Yes
            <span class="form-check-sign"></span>
            </label>
      </div>
      <div class="form-check-radio m-0">
        <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            value="no" 
            name="option" 
            ngModel 
            >
            No
            <span class="form-check-sign"></span>
            </label>
      </div>
    </div>
    <div *ngIf="myForm.value.option == 'yes'">
      <input type="file" class="form-control-file custom" id="cv">
    </div>
  </div>
</form>

根据单选按钮选择隐藏和显示元素？

3 个答案: