Forms 带输入字段和复选框的Angular 4表单验证

我这里有一张表格：

<form (ngSubmit)="onSubmit()" #testForm="ngForm">

  <div class="form-group col">
    <label for="a">a</label>
    <select class="form-control" id="a" [(ngModel)]="form.a" name="a" required>
      <option value="x">x</option>
      <option value="y">y</option>
    </select>
  </div>

  <div class="form-group">
    <label for="b">b</label>
    <input class="form-control" id="b" [(ngModel)]="form.b" name="b" required />
  </div>

  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input">c
    </label>
  </div>

  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input">d
    </label>
  </div>

  <div class="col text-right">
    <button type="submit" class="btn btn-success" [disabled]="!testForm.form.valid">Submit</button>
  </div>

</form>

我想要实现的是，我的按钮只有在下拉列表和输入字段都被填充时才被启用，这与

required

属性一起工作，并且两个复选框都被选中，这不起作用

我的问题：是否有类似于复选框的

必填项

，或者是否有其他方法可以解决此问题？

尝试以下方法：

 <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" [checked]="ch2" (change)="ch2= !ch2" class="form-check-input">c
    </label>
  </div>

  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" [checked]="ch1" (change)="ch1= !ch1" class="form-check-input">d
    </label>
  </div>

  <div class="col text-right">
    <button type="submit" class="btn btn-success" [disabled]="!testForm.form.valid || !ch1 || !ch2">Submit</button>
  </div>

C
D
提交

我想用

|

替换

&&

，现在它可以工作了，谢谢！伙计，你的要求。。并且两个复选框都被选中。如果你把| |放进去，那么选中其中一个复选框，你就在条件下得到了真值。。但是好的。希望我能帮助你！我是说真的。我不知道为什么，但在本例中，

|

的功能类似于AND，而不是OR。你自己试试看，很奇怪，等等，我现在知道了：我有4个元素a，b，c，D在我的表格中。一旦一个按钮无效，该按钮就不能点击。=>这意味着两个复选框以及dorpdown和输入字段都必须有效，因此OR是完全正确的。它不像“在所有字段都有效时启用按钮”，而是更像“在一个字段无效时立即禁用按钮”。是的，当其中一个元素为false时，disabled应该为true。那么好的条件是什么呢！testForm.form.valid | |！ch1 | |！我想是ch2。你能检查一下这个吗？

 <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" [checked]="ch2" (change)="ch2= !ch2" class="form-check-input">c
    </label>
  </div>

  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" [checked]="ch1" (change)="ch1= !ch1" class="form-check-input">d
    </label>
  </div>

  <div class="col text-right">
    <button type="submit" class="btn btn-success" [disabled]="!testForm.form.valid || !ch1 || !ch2">Submit</button>
  </div>