如何使用模板驱动的表单和表单验证使这两个开关之一在我的角度应用程序中成为必需项？

Question

<div class="card-body">
  <form #clientForm="ngForm" (ngSubmit)="onSubmit(clientForm)">

    <div class="form-group">

      <label for="calories">Calories</label>
      <input 
        type="number" 
        class="form-control"
        [(ngModel)]=client.calories
        name="calories"
        #clientCalories="ngModel"
        [ngClass]="{'is-invalid': clientCalories.errors && clientCalories.touched}"
        required
        minlength="1"
      >
      <div [hidden]="!clientCalories.errors?.required" class="invalid-feedback">
          Calories required
      </div>
      <div [hidden]="!clientCalories.errors?.minlength" class="invalid-feedback">
          Must be at least greater than 0
      </div>

    </div>

    <div class="form-group">

        <label for="dinner">Lunch</label>
        <ui-switch
        class="form-control"
        name="lunch"
        [(ngModel)]="client.lunch"
        #clientDinner="ngModel"
        >
        </ui-switch>

    </div>

    <div class="form-group">

        <label for="dinner">Dinner</label>
        <ui-switch
        class="form-control"
        name="dinner"
        [(ngModel)]="client.dinner"
        #clientDinner="ngModel"
        >
        </ui-switch>

    </div>

    <input type="submit" value="Submit" class="btn btn-primary btn-block">

  </form>
</div>

所以基本上，我想使最后两个表单组中的两个开关之一成为强制性，以便当用户不选择它们中的一个时，将像在“卡路里”表单组中一样引发错误。至少需要其中之一，您将无法继续。 就像卡路里表组一样，错误div的类将具有无效反馈。