jeudi 25 juillet 2019

Angular form not working if checkbox is unchecked then checked

I have a form that has three checkboxes, which are checked by default. If a uncheck the checkbox, and enter a value in the form below it and then submit, everything works fine.

If I uncheck one of the checkboxes then check it again and click submit, it doesn't work...

<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 " required />
            <span matSuffix></span>
        </mat-form-field>
    </div>

</form>




Aucun commentaire:

Enregistrer un commentaire