未选中复选框然后选中时角度形式无效

Question

我有一个包含三个复选框的表单，默认情况下它们是选中的。如果取消选中该复选框，并在其下方的表单中输入一个值，然后提交，一切正常。

如果我取消选中其中一个复选框，然后再次选中它并单击提交，则表示该表单无效。

https://angular-khmzeq.stackblitz.io

<form [formGroup]="form" autocomplete="off">
    <h2>Terms</h2>
    <div *ngIf="!this.input.data.acceptDate" [class.entry]="!form.get('acceptDate').value">
        <mat-checkbox class="checkbox" formControlName="acceptDate"><strong>I accept the date</strong>
        </mat-checkbox>
        <br />
        <br />
        <mat-form-field *ngIf="!form.get('acceptDate').value">
            <input matInput [matDatepicker]="optDate" placeholder="Preferred date" formControlName="optDate" [min]="now" required />
            <mat-datepicker-toggle matSuffix [for]="optDate"></mat-datepicker-toggle>
            <mat-datepicker #optDate></mat-datepicker>
        </mat-form-field>
    </div>

    <div *ngIf="!this.input.data.acceptPod" [class.entry]="!form.get('acceptPod').value">
        <mat-checkbox class="checkbox" formControlName="acceptPod"><strong>I accept the point of delivery</strong> 
        </mat-checkbox>
        <br />
        <br />
        <mat-form-field *ngIf="!form.get('acceptPod').value">
            <input matInput formControlName="optPod" type="text" placeholder="Preferred point of delivery" required />
        </mat-form-field>
    </div>

    <div [class.entry]="!form.get('acceptPrice').value">
        <mat-checkbox class="checkbox" formControlName="acceptPrice"><strong>I accept the price</strong> 
        </mat-checkbox>
        <br/>
        <br/>
        <mat-form-field *ngIf="!form.get('acceptPrice').value">
            <input matInput formControlName="price" type="number" placeholder="Price per {{ fuelQuery?.fuel.standardUnit }}" required />
            <span matSuffix>{{ fuelQuery?.payment.currency }}</span>
        </mat-form-field>
    </div>

</form>

async submitCounter({ valid, value }) {
      if(valid) {
// submit form
    }

    if(!valid){
      console.log('not valid');
    }
  }

Answer 1

您的表单第一次有效，因为以下字段不存在，因为 我接受日期 被选中：

<mat-form-field *ngIf="!form.get('acceptDate').value">
    <input matInput [matDatepicker]="optDate" placeholder="Preferred date" formControlName="optDate" [min]="now" required />
    <mat-datepicker-toggle matSuffix [for]="optDate"></mat-datepicker-toggle>
    <mat-datepicker #optDate></mat-datepicker>
</mat-form-field>

但是，当您取消选中 我接受日期 并再次检查时，该表单无效，因为取消选中该表单包含上述包含 required 的字段，如果 optDate 确实如此，则该表单无效没有价值。这也适用于您的其他领域。

我觉得为什么会发生这种情况很奇怪，但现在使用一种方法来检查表单的有效性。

isValidForm() {
  if (!this.form.get('acceptPrice').value && !this.form.get('price').value) {
    return false;
  } else return true;
}

以上只是一个例子。把你所有的条件。我对为什么会发生这种情况的了解有限。