mardi 4 février 2020

Angular 7 clear input fields

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