I'm making a form
in angular where I have a checkbox
and two input
fields. I want to make the input
fields disabled
and cleaned when the checkbox
is checked. I managed to do the disabled part but when the fields are disabled they still got their value. How can I do the clean part? I only found ways doing it with buttons or angularJs stuff but those neither works for me.
HTML code:
// other parts of form //
<div class="form-group">
<mat-checkbox formControlName="closed" class="form-control" color="primary" [(ngModel)]="disabled">
Closed</mat-checkbox>
</div>
<div class="material-input">
<mat-form-field class="form-group" appearance="outline">
<mat-label>Open from</mat-label>
<div class="timepicker">
<input matInput readonly [disableClick]="true" placeholder="Open from" formControlName="openFrom"
[ngxTimepicker]="startTimePicker" [format]="24" [disabled]="disabled">
<ngx-material-timepicker #startTimePicker></ngx-material-timepicker>
<ngx-material-timepicker-toggle [for]="startTimePicker"></ngx-material-timepicker-toggle>
</div>
<mat-error *ngIf="editForm.get('openFrom')?.errors && (editForm.get('openFrom').touched)">
This field is required
</mat-error>
</mat-form-field>
</div>
<div class="material-input">
<mat-form-field class="form-group" appearance="outline">
<mat-label>Open to</mat-label>
<div class="timepicker">
<input matInput readonly [disableClick]="true" placeholder="Open to" formControlName="openTo"
[ngxTimepicker]="startTimePicker2" [format]="24" [disabled]="disabled">
<ngx-material-timepicker #startTimePicker2></ngx-material-timepicker>
<ngx-material-timepicker-toggle [for]="startTimePicker2"></ngx-material-timepicker-toggle>
</div>
<mat-error *ngIf="editForm.get('openTo')?.errors && (editForm.get('openTo').touched)">
This field is required
</mat-error>
</mat-form-field>
</div>
Aucun commentaire:
Enregistrer un commentaire