Angular 7清除输入字段

Question

我在有form和两个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发射器。然后在组件函数中使用表单组执行以下操作以进行值清除。

 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>