时间戳

首页 > 解决方案 > 未选中复选框然后选中时角度形式无效

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

问题描述

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

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

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');
    }
  }

标签： angularformscheckboxangular-material

解决方案

您的表格第一次有效，因为以下字段不存在，因为我接受检查日期：

<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;
}

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

推荐阅读