Angular 7 очистить поля ввода

Question

Я делаю form в angular, где у меня есть checkbox и два input поля. Я хочу сделать input поля disabled и очистить при проверке checkbox. Мне удалось сделать отключенную часть, но когда поля отключены, они все еще получили свое значение. Как я могу сделать чистую часть? Я нашел способы сделать это только с помощью кнопок или angularJs, но у меня не работает ни один из них.

HTML код: Форматированный HTML

// 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>

Answer 1

Использовать mat-checkbox на сменном излучателе. А в функции компонента выполните следующие действия для очистки значения с помощью группы форм.

 onChange(args) {
  if(args.isChecked){
   this.editForm.get('openFrom').patchValue(null);
   this.editForm.get('openTo').patchValue(null);
  }
}

Answer 2

Проверьте это https://stackblitz.com/edit/angular-ghmdz1

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild('input', {static: false}) input : ElementRef<HTMLInputElement>
  onChange(event: MouseEvent){
  let target  = event.target as HTMLInputElement
    if (target.checked){
      this.input.nativeElement.value = ""
    }
  }
}

// app.component.html
<div>
  <input type="text" #input>

  <input  type="checkbox" (change)="onChange($event)">
</div>