Angular 2+表单验证：如何实现至少一个输入填值且复选框勾选

Hey Brian, let's get your form working exactly as you need it. The current setup uses required on every field, which means users have to fill both inputs and check both boxes—totally not matching your requirement of at least one input filled AND at least one checkbox checked. Here's how to fix this:

Step 1: Fix Core Issues in Your Original Code #

First, let's break down what was off:

• The required attribute on inputs/checkboxes enforces all fields to be completed, conflicting with your "at least one" rule.
• Both checkboxes shared the same name="test", which made Angular's ngModel behave unpredictably.
• The button's [disabled] relied on personalForm.valid, which only passes when all individual controls are valid (not our desired logic).

Step 2: Updated Form Template #

Replace your form code with this version—we'll remove unnecessary required attributes, fix checkbox names, and add custom validation logic for the button:

<form #personalForm="ngForm" class="editForm" novalidate>
  <div class='row'>
    <div class='col-xs-offset-1 col-xs-10 col-xs-offset-1 col-xs-10'>
      <div class="row">
        <!-- Email Input -->
        <div class='col-xs-12 col-sm-6'>
          <div class="form-group">
            <label class="control-label form-label" for="email">Email</label>
            <input 
              class="form-control input-md form-input" 
              id="email" 
              name="email" 
              #email="ngModel" 
              pattern="^[^\s@]+@[^\s@]+\.[^\s@]{2,}$"
              type="text" 
              placeholder="Email" 
              [(ngModel)]="customer.email"
            >
            <!-- Only show error if email is entered but invalid -->
            <div class="alert alert-danger" [hidden]="email.valid || email.pristine">
              Email must be a valid format
            </div>
          </div>
        </div>

        <!-- Phone Input -->
        <div class='col-xs-12 col-sm-6'>
          <div class="form-group">
            <label class="control-label form-label" for="phone">Phone Number</label>
            <input 
              class="form-control input-md form-input" 
              #phone="ngModel" 
              id="phone" 
              name="phone" 
              type="text" 
              (keypress)="keyPress($event)" 
              minlength="10" 
              maxlength="10" 
              [(ngModel)]="customer.phone"
            >
            <!-- Only show error if phone is entered but invalid -->
            <div class="alert alert-danger" [hidden]="phone.valid || phone.pristine">
              Phone Number must be 10 digits
            </div>
          </div>
        </div>
      </div>

      <!-- Checkboxes -->
      <div class='row'>
        <div class="btn-group btn-group" data-toggle="buttons">
          <label class="btn" [class.active]="personal.testEmail">
            <input 
              type="checkbox" 
              value="checkboxOne" 
              #testEmail="ngModel" 
              name="testEmail" 
              [(ngModel)]="personal.testEmail"
            >
            <i class="fa fa-square-o fa-2x"></i>
            <i class="fa fa-check-square-o fa-2x"></i>Email
          </label>
          <label class="btn" [class.active]="personal.testSMS">
            <input 
              type="checkbox" 
              #testSMS="ngModel" 
              name="testSMS" 
              [(ngModel)]="personal.testSMS" 
              value="SMS"
            >
            <i class="fa fa-square-o fa-2x"></i>
            <i class="fa fa-check-square-o fa-2x"></i>SMS
          </label>
        </div>
      </div>

      <!-- Checkbox Error Message -->
      <div id="divReqEmail" style="color:red" [hidden]="personal.testEmail || personal.testSMS">
        * Please select at least one option (Email or SMS)
      </div>

      <!-- Next Button -->
      <div class="form-group text-center">
        <button 
          uiSref="result" 
          class="btn btn-default btn-outline-rounded btn-info" 
          [disabled]="isButtonDisabled()"
          (click)="save(personalForm)"
        >
          Next <span style="margin-left:10px;" class="glyphicon glyphicon-arrow-right"></span>
        </button>
      </div>
    </div>
  </div>
</form>

Step 3: Add Component Logic #

In your component class, add the isButtonDisabled() method to handle the custom validation rule, and initialize your data objects:

import { Component } from '@angular/core';

@Component({
  // Your component metadata (selector, templateUrl, etc.) here
})
export class YourComponent {
  // Initialize data objects to avoid undefined errors
  customer = { email: '', phone: '' };
  personal = { testEmail: false, testSMS: false };

  // Determine if the Next button should be disabled
  isButtonDisabled(): boolean {
    // Check if NO inputs are filled (both email and phone are empty/whitespace)
    const noInputsFilled = !this.customer.email?.trim() && !this.customer.phone?.trim();
    // Check if NO checkboxes are selected
    const noCheckboxesSelected = !this.personal.testEmail && !this.personal.testSMS;

    // Disable button if either condition is true
    return noInputsFilled || noCheckboxesSelected;
  }

  // Your existing keyPress method (restrict to numbers)
  keyPress(event: KeyboardEvent) {
    const charCode = (event.which) ? event.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      event.preventDefault();
    }
  }

  // Your existing save method
  save(form: any) {
    // Your save logic here (e.g., submit data to API)
  }
}

How This Works #

• Input Validation: We removed required from inputs but kept format validations (email pattern, phone length). Error messages only show if the user enters invalid data, not if they leave fields empty.
• Checkbox Validation: Each checkbox has a unique name, and we show an error only when both are unselected.
• Button State: The isButtonDisabled() method checks two conditions:
  1. Are both inputs empty?
  2. Are both checkboxes unselected?
     If either is true, the button stays disabled. Only when at least one input is filled AND at least one checkbox is selected will the button become clickable.

内容的提问来源于stack exchange，提问作者Brian