分组复选框并有条件地显示输入字段答案

【问题标题】：Grouping checkboxes and displaying input field conditionally分组复选框并有条件地显示输入字段
【发布时间】：2021-03-03 17:44:19
【问题描述】：

我的 Angular 应用程序中有以下表单，我想根据复选框选择显示不同的输入字段。我已经使用 [(ngModel)] 来绑定值并使用 *ngIf 我试图显示/隐藏下面的文本字段。这个工作有点好，但我无法将“已检查”设置为 emailField。谁能告诉我我在这里做错了什么。

默认情况下，我希望检查 emailField 并显示相应的输入字段。

<form class="reminder-form">
    <div class="form-check">
        <input  [(ngModel)]="emailField" class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
        <label class="form-check-label" for="exampleRadios1">
          Email
        </label>
      </div>
      <div class="form-check">
        <input  [(ngModel)]="smsField" class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
        <label class="form-check-label" for="exampleRadios2">
          SMS
        </label>
      </div>

      <div class="email-box" *ngIf='emailfield'>
        <label class="form-check-label" for="noRemind">
            Email
        </label>
        <input type="email" name="email" class="form-control new-reading-input" placeholder="{{accountEmail}}">
    </div>
    <div class="sms-box" *ngIf='smsField'>
        <label class="form-check-label" for="noRemind">
            SMS
        </label>
        <input type="number" name="sms" class="form-control new-reading-input" placeholder="{{accountSMS}}">
    </div>
</form>

【问题讨论】：

标签： javascript html angular checkbox

【解决方案1】：

您需要bind single variable 到两个无线电输入：

app.component.html

<form class="reminder-form">
    <div class="form-check">
        <input  [(ngModel)]="radioValue" class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
        <label class="form-check-label" for="exampleRadios1">
          Email
        </label>
    </div>
    <div class="form-check">
        <input  [(ngModel)]="radioValue" class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
        <label class="form-check-label" for="exampleRadios2">
          SMS
        </label>
    </div>

    <div class="email-box" *ngIf='radioValue === "option1"'>
        <label class="form-check-label" for="noRemind">
            Email
        </label>
        <input type="email" name="email" class="form-control new-reading-input" placeholder="{{accountEmail}}">
    </div>
        <div class="sms-box" *ngIf='radioValue === "option2"'>
            <label class="form-check-label" for="noRemind">
            SMS
        </label>
            <input type="number" name="sms" class="form-control new-reading-input" placeholder="{{accountSMS}}">
    </div>
</form>

app.component.ts

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  accountEmail = "test@site.domain";
  accountSMS = "sms";
  radioValue = "option1";
}

【讨论】：